21

背景和设置

我正在尝试从 javascript 中的表格数据创建一个表格，但是当我尝试将行插入到表格元素中时，它以与我期望的相反的顺序插入，并且与你从 using 获得的相反的顺序插入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()andinsertCell()方法来创建表，迭代上面的数据和键。我得到了我期望的相反顺序：

插入行图片

使用以下代码生成：

// 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然而，如果我使用and创建一个表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 的顺序？有什么办法可以改变这个吗？我想否则我可以以相反的顺序迭代，但即使这样，你仍然不能插入 with table.insertRow()。这只是一个无赖，因为insertRow()andinsertCell()方法似乎比table.appendChild(document.createElement("tr"))etc更清晰。

4

4 回答 4

41

.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

于 2013-04-07T19:16:17.497 回答
4

你可以这样做：

var table = document.getElementById('myTableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
于 2015-11-17T19:21:48.973 回答
2

您必须在insertCell()likeinsertCell(inde)中指定一个索引才能按预期工作。

正如www.w3schools.com/jsref中所说

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

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

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

于 2013-04-07T19:16:53.870 回答
1

你可以这样做，

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);
于 2018-11-20T07:09:54.847 回答