Wednesday, December 9, 2009

insertCell populates cells in reverse order with IE

I have been using a javascript function to dynamically populate a row in an html table.

The basic formula was to create a new row to the table, and then to create 5 new cells, using:

row.insertCell(x) where x is the number of the cell.

So I had:

cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);
...

And I would also assign contents to each cell.

Problem was in IE, the cells would be displayed in the order 0, 4, 3, 2, 1 but in Firefox it was 0, 1, 2, 3, 4 as expected.

What I ended up doing to resolve the problem was to create a set of cell elements like:

var cell0 = document.createElement('td');
var cell1 = document.createElement('td');
var cell2 = document.createElement('td');
....

adding all the contents to each cell, and then once the were all populated, appending them as childElements to the Row element.

row.appendChild(cell0);
row.appendChild(cell1);
row.appendChild(cell2);
...

No comments:

Post a Comment