javascript - 将 tr 附加到表会使用 javascript 将新的 tbody 附加到 html 表

Question

请检查这个 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);

我正在尝试附加一个新的 <tr>到一张 table 。而是 <tbody><tr></tr></tbody>被追加，结果是 2 <tbody> html 表格中的元素。

那么这里出了什么问题呢？我该怎么做？ (我不想使用jquery)

Answer 1

是的它已经有一个defaulttbody标签，所以你必须使用它而不是引入新的标签。

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

你也可以简化它，比如

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);

<小时/>

更新:

在试图找出原因时，我遇到了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

这是上述代码的更新版本

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