Appending tr to table appends a new tbody to html table using javascript

Question

Please check this fiddle: http://jsfiddle.net/tn4euhsn/8/

HTML:

<table id="tab" border=1>
    <tr>
        <td>A col1</td>
        <td>A col2</td>
    </tr>
</table>

Javascript:

console.log("Here!");
var table = document.getElementById("tab");
var trnew = document.createElement("tr");
trnew.id = "row" + 2;
var td1 = document.createElement("td");
td1.innerHTML= "r2col1";
var td2 = document.createElement("td");
td2.innerHTML= "r2col2";
trnew.appendChild(td1);
trnew.appendChild(td2);
table.appendChild(trnew);
console.log(table.outerHTML);

I am trying to append a new <tr> to a table. But instead a <tbody><tr></tr></tbody> gets appended, resulting in 2 <tbody> elements in html table.

So whats wrong here? and how do I do it? (I don't want to use jquery)

Praveen · Accepted Answer · 2014-08-11T05:12:27.397

Yes it already has a default tbody tag so you have to use it instead of introducing new one.

var table = document.getElementById("tab").getElementsByTagName('tbody')[0];

Also you can simplify it like

var table = document.getElementById("tab").getElementsByTagName('tbody')[0];
var trnew = document.createElement("tr");
trnew.id = "row" + 2;
for (var i=1; i<=2; i++) {
    var td = document.createElement("td");
    td.innerHTML = "r2col" + i;
    trnew.appendChild(td);   
}
table.appendChild(trnew);


console.log(table.outerHTML);

Update:

While trying to figure out the reason, I came across HTMLTableElement,

If a table has multiple tbody elements, by default, the new row is inserted into the last tbody. To insert the row into a specific tbody

Here is an updated version of the above code

var table = document.getElementById("tab");
var index = table.getElementsByTagName("tr").length;
var newRow = table.insertRow(index);
newRow.id = "row" + 2;
for (var i = 0; i < 2; i++) {
    var newCell = newRow.insertCell(i);
    var newText = document.createTextNode("r2col" + i);
    newCell.appendChild(newText);
}

console.log(table);

Fiddle

score 0 · Answer 2 · answered Aug 08 '14 at 13:29

0

It seems that the browser will give it a tbody by default, try this:

<table border=1>
    <tbody id="tab">
        <tr>
            <td>A col1</td>
            <td>A col2</td>
        </tr>
    </tbody>
</table>

Append to the tbody not to the table.

Updated Fiddle

answered Aug 08 '14 at 13:29

Dai

1,510
1
11
12

Pls chk the fiddle yourself bfore posting here! – rahulserver Aug 08 '14 at 13:40
@rahulserver I did check your fiddle, and I amended it, did you have a specific issue with my answer? – Dai Aug 08 '14 at 13:53
i assume you are talking about the link you have mentioned in your answer. On running that fiddle, it does not append a row to the table(which was my original question) – rahulserver Aug 08 '14 at 14:52
@rahulserver look at the accepted answer here http://stackoverflow.com/questions/5872924/does-a-tr-have-to-be-inside-a-tbody, you can't append a tr to a table, it must belong to a thead, tbody or tfoot and will default to tbody if you don't specify but you can have multiple tbody tags so instead of guessing which one to use it creates a new one. – Dai Aug 08 '14 at 15:45

Appending tr to table appends a new tbody to html table using javascript

2 Answers2

Update:

Fiddle