如何使用HTMLTableElement.insertRow在表的末尾插入行

Question

背景和设置

我试图在javascript中使用表格数据创建表格，但是当我尝试将行插入表格元素时，它会以与我期望的相反的顺序插入，并使用与使用的相反的顺序appendChild。 （这里有a jsfiddle with a live demo）。

说我有这样的数据：

var data = [
    {"a": 1, "b": 2, "c": 3},
    {"a": 4, "b": 5, "c": 6},
    {"a": 7, "b": 8, "c": 9}
], keys = ["a", "b", "c"];

如果我尝试使用insertRow()和insertCell()方法创建表格，请迭代上面的数据和键。我得到了我期望的相反顺序：

使用以下代码生成：

// insert a table into the DOM
var insertTable = insertDiv.appendChild(document.createElement("table")),
    thead = insertTable.createTHead(), // thead element
    thRow = thead.insertRow(), // trow element
    tbody = insertTable.createTBody(); // tbody element


thRow.insertCell().innerText = "#"; // add row header

// insert columns
for (var i = 0, l = keys.length; i < l; i ++) {
    var k = keys[i];
    thRow.insertCell().innerText = k;
}

// insert rows of data
for (var i = 0, l = data.length; i < l; i ++) {
    var rowData = data[i],
        row = tbody.insertRow();
    row.insertCell().innerText = i;
    for (var j = 0, l = keys.length; j < l; j ++) {
        var elem = rowData[keys[j]];
        row.insertCell().innerText = elem;
    }
}

然而，如果我使用document.createElement和appendChild创建一个表格，我会收到我期望的订单：

生成者：

// now do the same thing, but using appendChild
var byChildTable = document.createElement("table");
byChildTable.setAttribute("class", "table");
thead = byChildTable.appendChild(document.createElement("thead"));
thRow = thead.appendChild(document.createElement("tr"));

// create table header
thRow.appendChild(document.createElement("td")).innerText = "#";
for (var i = 0, l = keys.length; i < l; i ++) {
    var key = keys[i];
    thRow.appendChild(document.createElement("td")).innerText = key;
}

// insert table data by row
tbody = byChildTable.appendChild(document.createElement("tbody"));
for (var i = 0, l = data.length; i < l; i ++) {
    var rowData = data[i],
        row = tbody.appendChild(document.createElement("tr"));
    row.appendChild(document.createElement("td")).innerText = i;
    for (var j = 0, l = keys.length; j < l; j ++) {
        var elem = rowData[keys[j]];
        row.appendChild(document.createElement("td")).innerText = elem;
    }
}

问题

如何控制元素在DOM中的顺序？有没有办法改变这个？我猜不然我可以按相反的顺序迭代，但即使这样，你仍然无法插入table.insertRow()。它只是一个无赖，因为insertRow()和insertCell()方法似乎比table.appendChild(document.createElement("tr"))等更清晰。

Answer 1

.insertRow和.insertCell方法采用索引。如果没有索引，大多数浏览器的默认值为-1，但某些浏览器可能会使用0或者可能会抛出错误，因此最好明确提供此错误。

要改为追加，只需提供-1，即可完成追加

var row = table.insertRow(-1);
var cell = row.insertCell(-1);

https://developer.mozilla.org/en-US/docs/DOM/table.insertRow

Answer 2

你可以这样做：

i

Answer 3

您必须在insertCell()中指定一个索引，例如insertCell(inde)，以便按预期工作。

正如在www.w3schools.com/jsref

中所说的那样

  

如果省略此参数，insertCell（）会在其中插入新单元格   IE中的最后一个位置以及Chrome和Safari中的第一个位置。

     

此参数在Firefox和Opera中是必需的，但可选   Internet Explorer，Chrome和Safari。

出于同样的原因，inserRow()中也需要索引。

Answer 4

您可以这样做

var table = document.getElementById("yourTable");
var row = table.insertRow(-1);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);