Kwa Kil On Swa

Thursday, March 01, 2007

javascript fun, copying table rows with innerHTML or cloneNode()

I discovered two ways of copying a row from one html table to another.

One way is by using the innerHTML attribute of each cell, to copy across the content of each cell.

The other way is to use cloneNode() which is supposedly more standards compliant as there is no spec for w3c innerHTML spec.

But there are problems with the innerHTML approach in firefox 1.5 (See comp.lang.javascript " Preserving input values in innerHTML with Mozilla" http://groups.google.co.uk/group/comp.lang.javascript/browse_thread/thread/ee1d0533b9abda48/bda10d752dfdd215?lnk=st&q=firefox+innerHTML+input+value&rnum=2&hl=en#bda10d752dfdd215)

The problem is that once you set set the target row content with innerHTML, any changes the user makes to any input fields in the table row are not retrievable using innerHTML. Its remains a sort of snapshot of when it was first set. (Firefox 1.5 (not sure about 2.0))

The cloneNode(true) does a deep clone of a dom tree and is decribed here http://www.pxl8.com/cloneNode.html. The problem is that in IE6 it will not copy between windows which is the scenario, that I am trying to use it in. The problem is described here (look for IE cannot handle cross-window DOM node manipulation): http://www.codingforums.com/showthread.php?p=342582

0 Comments:

Post a Comment

<< Home