deleteRow() weird behavior, deletes two rows.
-
I guess this could be considered a tip as well as a possible question. I've found that if I have a table with the first row having a colspan value, i.e. header for the table, then deleting the last remaining row below the colspan row deletes the colspan row too. Check it out - paste the following into an .html, add a few rows, then delete a few rows.
<html>
<head><title>JS Dynamic Table Test</title>
<script language="JavaScript">
<!--
function AddRow() {
var a_misctext = ["Gary","Mary","Larry","Harry","June","Marge","Lisa","Tina","Rika","Susan"];
tbl = document.getElementById('DataArea');
lastrow = tbl.rows.length;
workrow = tbl.insertRow(lastrow);
workrow.insertCell(0);
workrow.cells[0].innerHTML = "<nobr>"+a_misctext[Math.floor(Math.random()*10.0)]+"</nobr>";
workrow.insertCell(1);
workrow.cells[1].innerHTML = "<input type=\"button\" value=\"x\" onClick=\"PopRow(this.parentNode.parentNode.rowIndex);\">";return false;}
function PopRow(x) {
document.getElementById('DataArea').deleteRow(x);
}
//-->
</script>
</head>
<body>
<form>
<table id=DataArea cellpadding=4 cellspacing=0 border=0>
<tbody>
<tr><td colspan="2">My Stuff <input type="button" value=" Add " onClick="AddRow();"></td></tr>
</tbody>
</table>
</form>
</body>
</html>I "fixed" it by turning the colspan row into 2 separate columns:
<tr><td>My Stuff</td><td><input type="button" value=" Add " onClick="AddRow();"></td></tr>Any idea why the table would collapse when deleting the last row? -
I guess this could be considered a tip as well as a possible question. I've found that if I have a table with the first row having a colspan value, i.e. header for the table, then deleting the last remaining row below the colspan row deletes the colspan row too. Check it out - paste the following into an .html, add a few rows, then delete a few rows.
<html>
<head><title>JS Dynamic Table Test</title>
<script language="JavaScript">
<!--
function AddRow() {
var a_misctext = ["Gary","Mary","Larry","Harry","June","Marge","Lisa","Tina","Rika","Susan"];
tbl = document.getElementById('DataArea');
lastrow = tbl.rows.length;
workrow = tbl.insertRow(lastrow);
workrow.insertCell(0);
workrow.cells[0].innerHTML = "<nobr>"+a_misctext[Math.floor(Math.random()*10.0)]+"</nobr>";
workrow.insertCell(1);
workrow.cells[1].innerHTML = "<input type=\"button\" value=\"x\" onClick=\"PopRow(this.parentNode.parentNode.rowIndex);\">";return false;}
function PopRow(x) {
document.getElementById('DataArea').deleteRow(x);
}
//-->
</script>
</head>
<body>
<form>
<table id=DataArea cellpadding=4 cellspacing=0 border=0>
<tbody>
<tr><td colspan="2">My Stuff <input type="button" value=" Add " onClick="AddRow();"></td></tr>
</tbody>
</table>
</form>
</body>
</html>I "fixed" it by turning the colspan row into 2 separate columns:
<tr><td>My Stuff</td><td><input type="button" value=" Add " onClick="AddRow();"></td></tr>Any idea why the table would collapse when deleting the last row?var row=x.parentNode.parentNode
row.parentNode.removeChild(row)
PopRow(this) -
var row=x.parentNode.parentNode
row.parentNode.removeChild(row)
PopRow(this)