Home : Tags

innerHTML

MSIE Javascript workarounds for table manipulation

Software

Sorting tables on the fly can be fun in Javascript, especially when working with standard-compliant browsers. However when MSIE is thrown in the mix, the following workarounds are key to know:

If insertRow doesn't work properly or at all, just use insertBefore(newRow, targetRow). If you actually need to insert after, use targetRow.nextSibling if it is not null and otherwise simply use tbody.appendChild.

If newRow.innerHTML assignments are working, then just move the children of the original row to the new one instead. Like this:

var cells = oldRow.getElementsByTagName("td");
var i;
for ( i=0; i {
var td = cells[i];
newRow.appendChild( td );
}

Note that the counter is not incremented: appendChild removes the element from the source so you'll always be operating on the zeroeth child.

These techniques make sure your table manipulations start working in both MSIE/6 and MSIE/7, while everything is still fine and dandy on KHTML (Konqueror/Safari), Firefox and Opera.

© Copyright 1995-2007 Robert John Kaper. All rights reserved.

Tom has more friends but mine are prettier! (#1/1)