parentNode.parentNode.rowindex to delete a row in a dynamic table
- by billy85
I am creating my rows dynamically when the user clicks on "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>
Now, I would like to use the href [Delete] to delete one particular row.
I wrote this:
<script type="text/javascript">
function deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('table').deleteRow(i);
}
</script>
When I change the first code like this: cell4.setAttribute("href","javascrit:deleteRow(this);");
I got an error: The page cannot be displayed. I am redirected to a new pagewhich can not be displayed.
How could I delete my row by using the function deleteRow(r)?
table is the id of my table
Thanks.
Billy85
