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);
...

TextArea line breaks in IE

I've spent several days wrestling with this problem. I have two almost identical pages, which both pull data in from the same XML stream.

On one page I display the data in a textarea, and on the other I add a few lines and then display it in a textarea.

In Firefox it worked fine, however in Internet Explorer the line breaks in the text were stripped out.

I tried everything, and then realized that on the working page, I was using:

element.value = displayText

and on the other

element.innerHTML = displayText

Changed the innerHTML to value, and it worked perfectly.

Go figure!