Click to See Complete Forum and Search --> : Delete row (<tr>) in table


michelle
08-28-2003, 08:07 AM
I have found it very hard to delete a TR using JavaScript.
I read somewhere that the TR is read-only (why??).

I have TRs with an ID attached to them, so I can edit or delete them as I want to.

<table>
<tbody id=tableId>
<tr id=tr1><td>stuff</td></tr>
<tr id=tr2><td>stuff</td></tr>
<tr id=tr3><td>stuff</td></tr>
</tbody>
</table>

As I see it there are a few ways of deleting a row in a table:

1) The easiest way would be
document.getElementById("tr2").outerHTML = "";
(Does not work)

2) Loop through the rows in the table
for (var i = 0; i < document.getElementById("tableId").rows.length; i++) {
if (document.getElementById("tableId").rows[i].id == "tr2") {
document.getElementById("tableId").deleteRow(i);
}
}
(This works, but is very slow if you want to delete many rows, since for every TR to remove, you have to loop through the entire table each time)

3) Hopefully this would work, but it did not
document.getElementById("tableId").deleteRow("tr2");

NOTE: I use IE 5.5.

Any thoughts?
// Michelle

Khalid Ali
08-28-2003, 08:18 AM
I have an example code at this location (http://www.webapplikations.com/pages/html_js/tables/DOMTableManipulation.html)
best part is that its crossbrowser(NS and IE)