Problem with rowIndex in Javascript

Question

Hi,

i currently have a big problem with the rowIndex in the IE8. When i call the page i have an empty table element. With Javascript i now add Rows and Columns to this table.

// Create Elements
tr = document.createElement('tr');
td = document.createElement('td');
// Append Elements to existing Table
tr.appendChild(td);
table.appendChild(tr);

The User later has the Option to delete these Rows. To delete them i simply call the deleteRow Function of the table and pass the rowIndex as a parameter.

table.deleteRow(tr.rowIndex);

In the Firefox this works fine. The rowIndex is correct and the rows can be deleted. In the IE8 the rowIndex ALWAYS is -1. The deleteRow function - of course - can't find the matching row and the row isn't deleted.

Does anyone know this problem and has a nice solution for this?

Answer 1

You might try removeChild.

That is as easy as:

table.removeChild(tr);

Answer 2

IE will still give you a -1 rowIndex if the row is in a table but the table is not attached to the document.

You could fix it by adding the table to the document, but it's probably easier to avoid the problem by simply using the generic DOM Level 1 Core method instead of the table-specific DOM-HTML methods:

tr.parentNode.removeChild(tr);

It's probably also best to create a tbody element and put the rows in that; otherwise browsers may unexpectedly do it for you.