Javascript for loop - looping through rows to add to table

Question

I am appending trs to a table from a string. I use the following code to write an entire table using innerHTML, then I can use standard DOM to transfer the new bits to the existing table.

var div = document.createElement("div");
div.innerHTML = "<table><tbody>" + string + "</tbody></table>";

Using the following simple Javascript is fine, until we look at CSS styling. This causes each section to be in a different tbody. This is not acceptable as CSS styling is using :nth-child(odd)

document.getElementById("left").appendChild(div.firstChild.tBodies[0]);

Thus, I have changed the code to this, but it is only adding every other row to the table. What did I do wrong?

var tableBody = div.firstChild.tBodies[0];
var appendToTable = document.getElementById("left").tBodies[0];

var totalnodes = tableBody.childNodes.length;

for (var thenodes = 0; thenodes < totalnodes; thenodes++) {
    appendToTable.appendChild(tableBody.childNodes[thenodes]);
}

@ArunPJohny I would, however, it looks like we already found our answer. — michaellindahl
– michaellindahl, Commented Mar 5, 2013 at 3:49

epascarello · Accepted Answer · 2013-03-05 03:42:44Z

3

childNodes is a live node set, so when you remove it, the other elements shift down an index. So you end up getting every other row.

while (tableBody.childNodes.length) {
    appendToTable.appendChild(tableBody.childNodes[0]);
}

answered Mar 5, 2013 at 3:42

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

michaellindahl Over a year ago

So accessing a childNode removes it from the set? Where can I learn more about this live node set idea.

RobG Over a year ago

Not all the children of a tbody are rows. In some browsers, some of the child nodes will be text nodes. The above will transfer those as well (which isn't an issued, just pointing it out).

RobG Over a year ago

@michaellindahl—yes. You are moving nodes from one parent to another, so they are no longer members of the initial tbody element. It is all covered in the relevant specification.

michaellindahl Over a year ago

@RobG Okay, so to try to understand this, DOM methods like appendChild will move the child to the new location? (I'm terrible at reading specs, also you are soo awesome!)

RobG Over a year ago

Yes, that's what's meant by If the newChild is already in the tree, it is first removed. The row is initially a member of the tbody's childNodes because it's a descendant. Once it's moved, it becomes a childNode of a different tbody. A live collection means it's updated as you go, it doesn't stay static (i.e. as it was when you first referenced it).

Collectives™ on Stack Overflow

Javascript for loop - looping through rows to add to table

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related