parentNode.parentNode.rowindex pour supprimer une ligne dans un tableau dynamique
Je suis entrain de créer mon rangées de façon dynamique lorsque l'utilisateur clique sur "Ajouter".
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) //Firefox and others
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ //Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { //XMLHttpRequest not supported by your browser
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr
}
/**
* method called when the user clicks on the button
*/
function go(){
var xhr = getXhr()
//We defined what we gonna do with the response
xhr.onreadystatechange = function(){
//We do somthing once the server's response is OK
if(xhr.readyState == 4 && xhr.status == 200){
//alert(xhr.responseText);
var body = document.getElementsByTagName("body")[0];
//Retrieve <table> ID and create a <tbody> element
var tbl = document.getElementById("table");
var tblBody = document.createElement("tbody");
var row = document.createElement("tr");
//Create <td> elements and a text node, make the text
//node the contents of the <td>, and put the <td> at
//the end of the table row
var cell_1 = document.createElement("td");
var cell_2 = document.createElement("td");
var cell_3 = document.createElement("td");
var cell_4 = document.createElement("td");
//Create the first cell which is a text zone
var cell1=document.createElement("input");
cell1.type="text";
cell1.name="fname";
cell1.size="20";
cell1.maxlength="50";
cell_1.appendChild(cell1);
//Create the second cell which is a text area
var cell2=document.createElement("textarea");
cell2.name="fdescription";
cell2.rows="2";
cell2.cols="30";
cell_2.appendChild(cell2);
var cell3 = document.createElement("div");
cell3.innerHTML=xhr.responseText;
cell_3.appendChild(cell3);
//Create the fourth cell which is a href
var cell4 = document.createElement("a");
cell4.appendChild(document.createTextNode("[Delete]"));
cell4.setAttribute("href","javascrit:deleteRow();");
cell_4.appendChild(cell4);
//add cells to the row
row.appendChild(cell_1);
row.appendChild(cell_2);
row.appendChild(cell_3);
row.appendChild(cell_4);
//add the row to the end of the table body
tblBody.appendChild(row);
//put the <tbody> in the <table>
tbl.appendChild(tblBody);
//appends <table> into <body>
body.appendChild(tbl);
//sets the border attribute of tbl to 2;
tbl.setAttribute("border", "1");
}
}
xhr.open("GET","fstatus.php",true);
xhr.send(null);
}</head>
<body >
<h1> Create an Item </h1>
<form method="post">
<table align="center" border = "2" cellspacing ="0" cellpadding="3" id="table">
<tr><td><b>Functionality Name:</b></td> <td><b>Description:</b></td> <td><b>Status:</b></td> <td><input type="button" Name= "Ajouter" Value="Ajouter" onclick="go()"></td></tr>
</table>
</form>
</body>
</html>Maintenant, je voudrais utiliser le href [supprimer] pour Supprimer une ligne particulière.
J'ai écrit ceci:
<script type="text/javascript">
function deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('table').deleteRow(i);
}
</script>Lorsque je modifie le premier code comme ceci: cell4.setAttribute("href","javascrit:deleteRow(this);");
J'ai une erreur: impossible d'afficher La page. Je suis redirigé vers une nouvelle pagewhich ne peut pas être affichée.
Comment pourrais-je supprimer ma ligne en utilisant la fonction deleteRow(r)?
table est l'id de ma table
- cell4.setAttribute("href","javascrit:deleteRow(this);"); ==> il vous manque le " p "dans " javascript". Si c'est dans votre code, c'est votre problème.
- Ce n'est pas que la faute d'orthographe est-elle (javascrit:...)? cell4.setAttribute("href","javascrit:deleteRow(this);");
- Oh merci beaucoup. Je suis vraiment stupide parfois.
Vous devez vous connecter pour publier un commentaire.
Vérifier l'url ci-dessous :
http://www.tek-tips.com/viewthread.cfm?qid=1232357&page=1