I need some help modifying this code. The code was orginally setup to
add/remove a single table row. I modified it to add 2 (two) rows with
one column that spans both rows. That part works. I just need help
with the removerow function. Thanks for any help you can offer me.
Here is the code:
<html>
<head>
<title>New Document</title>
<script type="text/javascript">
// The counter just keeps track of which row we've added so we can
// distinguish them. It is only used for generating text, none of
// the functions depend on this number for node manipulation.
var counter = 1;
var plain = true;
function addrow()
{
// Obtain a reference to the tbody node.
var tbody = document.getElementById("main").getElementsByTagNa me("tbody").item(0);
if(plain)
{
plain=false;
}
else
{
plain=true;
}
for(x=1;x<3;x++)
{
// Generate a new row.
var tr = document.createElement("tr");
if(plain)tr.bgColor = "#CCCCCC";
// Append the two cells to the element.
if(x==1)
{
td = document.createElement("td");
td.rowSpan = "2";
td.innerHTML = '<input type="button" value="Delete"
onclick="deleterow(this)" />';
tr.appendChild(td);
}
for(i=1;i<4;i++)
{
var td = document.createElement("td");
td.innerHTML = '<div align="right"><a onClick="removerow(this)"><img
src="images/delete2.jpg" width="16" height="16"></A></div>';
tr.appendChild(td);
}
// Now append the new row to the tbody.
tbody.appendChild(tr);
}
}
function deleterow(node)
{
// Obtain a reference to the containing tr. Use a while loop
// so the function can be called by passing any node contained by
// the tr node.
var tr = node.parentNode;
while (tr.tagName.toLowerCase() != "tr")
tr = tr.parentNode;
// Remove the tr node and all children.
tr.parentNode.removeChild(tr);
}
</script>
</head>
<body>
<table id="main" border="2">
<tr>
<td>Dynamic Table Demo</td>
<td><input type="button" onclick="addrow()" value="Add Row"/></td>
</tr>
</table>
</body>
</html>
