.rows[] and .cells[] in IE when using cloneNode()

posted September 21st 2005 at 2136 EDT in All, HTML, IE, Javascript

There are a set of accessors specific to tables which make it easy to manipulate them using Javascript. But they are only available when the node is part of the document tree.

Those accessors are .tbodies[], .rows[], .cells[]. Normally you use .childNodes[] and .firstChild and such when manipulating the javascript DOM tree. But the others seem simpler. A good background on these functions is available at http://www.quirksmode.org/dom/w3c_html.html.

One use for these accessors is an easy way to duplicate rows in a table using the cloneNode(true) function. (passing in 'true' forces a deep copy).

This works like so:


function duplicateRow(){
   table = document.getElementById("tableID");
   var newRow = table.tBodies[0].rows[0].cloneNode(true);
    //modify newRow as appropriate
   table.tBodies[0].appendChild(newRow);
}
 

All works well untill you try to modify the variable newRow useing the .cells[] notation.

The following code breaks in IE (it works of course in FireFox).


function duplicateRow(){
   table = document.getElementById("tableID");
   var newRow = table.tBodies[0].rows[0].cloneNode(true);
   newRow.cells[0].innerHTML = "cell 1 content";
   newRow.cells[1].innerHTML = "cell 2 content";
   table.tbodies[0].appendChild(newRow);
}
 

It turns out that the .cells[] accessor is only available after you append the row into the DOM tree. The nice thing about .cells[] is it ignores text nodes that you have to work around when using .childNodes. Aparantly deep copy has some other meaning in IE.

The Solution : Append first, access later


function duplicateRow(){
   table = document.getElementById("tableID");
   var newRow = table.tBodies[0].rows[0].cloneNode(true);
   table.tBodies[0].appendChild(newRow);
   newRow.cells[0].innerHTML = "cell 1 content";
   newRow.cells[1].innerHTML = "cell 2 content";
}
 

10 Responses

  1. #1 Asif
    4 years, 9 months ago

    while using duplicatroaw() in ie6 one error comes that is
    var newRow = table.tbodies[0].rows[0].cloneNode(true) is null or not an objetct please try to resolve this problem

  2. #2 jehiah
    4 years, 9 months ago

    Asif: do you have an example page where the error is occuring?

  3. #3 Asif
    4 years, 9 months ago

    Hi friend
    i m sending my sample page code plz try to resolve the problem.

    Untitled Document

    function duplicateRow(){
    table = document.getElementById(“table1″);
    var newRow = table.tbodies[0].rows[0].cloneNode(true);
    table.tbodies[0].appendChild(newRow);
    newRow.cells[0].innerHTML = “cell 1 content”;
    newRow.cells[1].innerHTML = “cell 2 content”;
    }

        CELL1 TEXT

    CELL2 TEXT

  4. #4 jehiah
    4 years, 9 months ago

    Ahha case get’s me every time. tBodies has a capital B. I’ve updated the examples above.

    guess I can’t blame that on copy & paste

  5. #5 Asif
    4 years, 9 months ago

    Thanks Friend
    now ur code is working nicelly

  6. #6 Dat Chu
    4 years, 8 months ago

    I am having trouble with this technique. After using cloneNode and appendChild to append the new row into the table. I found out that for some reason rows[] is NOT updated with the new node. Maybe because appendChild is too generic is does not force the table to update its rows[].

    Is there a way to force table to recheck? Or do I have to resolve to using insertRow(). I chose cloneNode because it is much shorter in the amount of code needed to clone a row.

    I don’t use tBodies though so I wonder if that is the cause of the problem.

  7. #7 Patrick Kaeding
    3 years, 11 months ago

    This looks very interesting. My next question is how to determine the row index of any given row. A little Google searching, and I found a solution:
    http://www.maratz.com/blog/archives/2005/05/18/detect-table-row-index-with-javascript/

    I hope that helps if anyone else was wondering about this.

  8. #8 jehiah
    3 years, 7 months ago

    This problem is also referenced in a bug report at quirksmode.org something I should have done long ago.

  9. #9 Bobmanguything
    1 year, 10 months ago

    Thanks!!!!!!! I have been looking for a solution to this exact problem for a while now. For some reason it is fairly obscure.

  10. #10 somnath
    1 year, 4 months ago

    fgfd