如何使用 HTMLTableElement.insertRow 在表格末尾插入行
Posted
技术标签:
【中文标题】如何使用 HTMLTableElement.insertRow 在表格末尾插入行【英文标题】:How to insert row at end of table with HTMLTableElement.insertRow 【发布时间】:2013-03-29 18:55:08 【问题描述】:背景和设置
我正在尝试从 javascript 中的表格数据创建一个表格,但是当我尝试将行插入到表格元素中时,它以与我期望的相反的顺序插入,并且与使用 @987654326 得到的相反的顺序插入@。 (这里是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"))
等更清晰。
【问题讨论】:
insertRow()
将索引作为参数,以便您可以选择放置新插入行的位置。 developer.mozilla.org/en-US/docs/DOM/table.insertRow
哇——我现在觉得有点傻——我想我只是在 MDN 上错过了。谢谢大家!
仅供参考,您使用的某些方法在 Firefox 中不起作用。我认为您需要.appendChild()
而不是.createTBody()
和.createTHead()
。此外,如果您没有在insertCell()
和.insertRow()
中包含索引,Firefox 会抛出错误。
@amnotiam 谢谢,很高兴知道。显然appendChild
方法也更快。
@JeffTratner:不客气。此外,Firefox 不支持非标准的.innerText
。标准属性是.textContent
。 IE8及以下需要.innerText
,所以如果你支持这些浏览器,我会在你的应用程序顶部做一个这样的变量:var text = ("textContent" in document) ? "textContent" : "innerText";
,然后用它来获取和设置文本。 row.insertCell(-1)[text] = k;
这是一个完整的工作版本:jsfiddle.net/ZfqRu
【参考方案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
【讨论】:
【参考方案2】:您必须在 insertCell()
中指定一个索引,例如 insertCell(inde)
才能按预期工作。
正如www.w3schools.com/jsref中所说的
如果省略此参数,则 insertCell() 将新单元格插入到 在 IE 中的最后一个位置,在 Chrome 和 Safari 中的第一个位置。
此参数在 Firefox 和 Opera 中是必需的,但在 Opera 中是可选的 Internet Explorer、Chrome 和 Safari。
出于同样的原因,inserRow()
中也需要索引。
【讨论】:
@vortex7:仅供参考,要突出显示文档,请使用 blockquote 格式而不是代码格式。【参考方案3】:你可以这样做:
var table = document.getElementById('myTableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
【讨论】:
【参考方案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);
【讨论】:
以上是关于如何使用 HTMLTableElement.insertRow 在表格末尾插入行的主要内容,如果未能解决你的问题,请参考以下文章
如何在自动布局中使用约束标识符以及如何使用标识符更改约束? [迅速]
如何使用 AngularJS 的 ng-model 创建一个数组以及如何使用 jquery 提交?