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

Question

背景和设置

我正在尝试使用javascript中的表格数据创建一个表,但是当我尝试将行插入到表元素中时,它会以与我期望的相反的顺序插入,并且使用相反的顺序appendChild.(这是一个jsfiddle与现场演示).

说我有这样的数据:

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