PDA

View Full Version : IE Dynamic Table Issues



Trinithis
06-13-2007, 03:52 AM
*Solved issue by using thead, tfoot, tbody tags.*


I'm writing code to change the size of the following table (into a square NxN matrix)

<table id="matrixTable"></table>
Here's the function


var matrixTable = document.getElementById("matrixTable");
function resizeMatrix(x) {
for(var i=matrixTable.childNodes.length-1; i>=0; --i) {
matrixTable.removeChild(matrixTable.childNodes[i]);
}
for(var i=0, row, col, field; i<x; ++i) {
row = matrixTable.appendChild(document.createElement("tr"));
for(var j=0; j<x; ++j) {
col = row.appendChild(document.createElement("td"));
field = col.appendChild(document.createElement("input"));
field.type = "text";
field.size = 3;
}
}
}

And here's an equivalent function


var matrixTable = document.getElementById("matrixTable");
function resizeMatrix(x) {
for(var i=matrixTable.childNodes.length-1; i>=0; --i) {
matrixTable.removeChild(matrixTable.childNodes[i]);
}
for(var i=0, row, col, field; i<x; ++i) {
row = document.createElement("tr");
for(var j=0; j<x; ++j) {
col = document.createElement("td");
field = document.createElement("input");
field.type = "text";
field.size = 3;
col.appendChild(field);
row.appendChild(col);
}
row.appendChild(col);
matrixTable.appendChild(row);
}
}


Neither work in IE6, yet they do not produce any error dialogues. I don't even get one cell. I've even tried removing the input tags in lue of text nodes and other tag types, but to no avail.

On the other hand, it works fine in FF, however, calling the function multiple times causes the table to lower slightly on the page. CSS absolute positioning does not seem to fix that too.

Any suggestions?