将tr添加到table中使用javascript将一个新的tbody添加到html表中

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

本文关键字：添加 一个 tbody 表中 html table tr javascript      更新时间：2023-09-26

请检查此提琴: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>添加到表中。而是一个<tbody><tr></tr></tbody>在html表中添加了2个<tbody>元素。

怎么了?我该怎么做呢?(我不想使用jquery)

是它已经有一个默认的 tbody标记，所以你必须使用它而不是引入新的。

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

更新:

当我试图找出原因时，我看到了 html元素，

如果一个表有多个tbody元素，默认情况下，新行为插入到最后一个tbody。将行插入到特定的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);

小提琴

浏览器似乎默认会给它一个标题，试试这个:

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

追加到非表的主体。

更新小提琴

相关文章：