MSIE Javascript workarounds for table manipulation
- Posted by Rob (#1) on March 28, 2007 16:16 CEST
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.
- Tags: Javascript, HTML, MSIE, tables, workarounds, innerHTML, insertRow
Comments
Rob (#1) on Mar 28, 2007 18:02 CEST (Post reply)
Actually what I'm working on is a concert web site so I am merely combining two hobbies. :-)
prutser (#131) on Mar 28, 2007 17:14 CEST (Post reply)
I'm glad you finally went back to some serious engineering and hacking Rob. Sometimes it seems you dedicate all your time to rock concerts and there's nothing left for more serious things in life (read: hacking).