Html 如何使用 HTMLTableElement.insertRow 在表格末尾插入行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15866451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert row at end of table with HTMLTableElement.insertRow
提问by Jeff Tratner
Background and Setup
背景和设置
I'm trying to create a table from tabular data in javascript, but when I try inserting rows into a table element, it inserts in the opposite order from what I expect and the opposite order of what you get from using appendChild. (Here's a jsfiddle with a live demoof this).
我正在尝试从 javascript 中的表格数据创建一个表格，但是当我尝试将行插入到表格元素中时，它插入的顺序与我期望的顺序相反，而插入的顺序与使用appendChild. （这是一个带有现场演示的jsfiddle）。
Say I have some data like this:
假设我有一些这样的数据：
var data = [
{"a": 1, "b": 2, "c": 3},
{"a": 4, "b": 5, "c": 6},
{"a": 7, "b": 8, "c": 9}
], keys = ["a", "b", "c"];
If I try using the insertRow()and insertCell()methods for creating tables, iterating over the data and keys above. I get the reverse order of what I expect:
如果我尝试使用insertRow()和insertCell()方法创建表，则遍历上面的数据和键。我得到的顺序与我期望的相反：
Generated by using the following code:
使用以下代码生成：
// 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;
}
}
Whereas, if I create a table using document.createElementand appendChild, I get the order I would expect:
然而，如果我使用document.createElementand创建一个表appendChild，我会得到我期望的顺序：
Generated by:
产生者：
// 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;
}
}
Question
题
How do I control the order it puts the elements in the DOM? Is there any way to change this? I guess otherwise I could iterate in reverse order, but even that way, you still can't insert with table.insertRow(). It's just a bummer because the insertRow()and insertCell()methods seem much clearer than table.appendChild(document.createElement("tr"))etc.
如何控制将元素放入 DOM 的顺序？有什么办法可以改变这种情况吗？我想否则我可以以相反的顺序迭代，但即使这样，你仍然无法插入table.insertRow(). 这只是一个无赖，因为insertRow()andinsertCell()方法似乎比table.appendChild(document.createElement("tr"))etc更清晰。
回答by
The .insertRowand .insertCellmethods take an index. In absence of the index, the default value is -1in most browsers, however some browsers may use 0or may throw an error, so it's best to provide this explicitly.
该.insertRow和.insertCell方法采取的索引。在没有索引的情况下，默认值-1在大多数浏览器中都是默认值，但是某些浏览器可能会使用0或可能会引发错误，因此最好明确提供此值。
To to an append instead, just provide -1, and an append will be done
要改为追加，只需提供-1，即可完成追加
var row = table.insertRow(-1);
var cell = row.insertCell(-1);
https://developer.mozilla.org/en-US/docs/DOM/table.insertRow
https://developer.mozilla.org/en-US/docs/DOM/table.insertRow
回答by Codingpan
You can do this:
你可以这样做：
var table = document.getElementById('myTableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
回答by vortex7
You have to specify an index in insertCell()like insertCell(inde)in order to work as you expect.
您必须在insertCell()likeinsertCell(inde)中指定一个索引才能按预期工作。
As it is said in www.w3schools.com/jsref
If this parameter is omitted, insertCell() inserts the new cell at the last position in IE and at the first position in Chrome and Safari.
This parameter is required in Firefox and Opera, but optional in Internet Explorer, Chrome and Safari.
如果省略此参数，insertCell() 将在 IE 中的最后一个位置和 Chrome 和 Safari 中的第一个位置插入新单元格。
此参数在 Firefox 和 Opera 中是必需的，但在 Internet Explorer、Chrome 和 Safari 中是可选的。
An index is required also in inserRow()for the same reason.
inserRow()出于同样的原因，也需要索引。
回答by sammani anuththara
You can do this,
你可以这样做，
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);
