javascript 使用Javascript将表格行添加到表格中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17004170/
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
Using Javascript To Add A Table Row Into Middle Of Table
提问by gbmhunter
Using Javascript, I am trying to add a new table row into the the middle of a table, where the new table row is a copy of one of the pre-existing rows.
使用 Javascript，我试图将新表行添加到表的中间，其中新表行是预先存在的行之一的副本。
There are a lot of questions similar to this on stackoverflow, but none seemed to help me solve this problem.
在stackoverflow上有很多类似的问题，但似乎没有一个能帮助我解决这个问题。
function AddRow()
{
var mainTable = document.getElementById('mainTable');
mainTable.insertBefore(
mainTable.rows[0].cloneNode(true),
mainTable.rows.childNodes[2]);
}
I know the problem exists in the last variable passed to insertBefore(), as if I leave this blank the code performs correctly and inserts the cloned first row at the end of the table (if no 2nd parameter is present, it acts like appendRow().
我知道问题存在于传递给 insertBefore() 的最后一个变量中，就好像我将此留空一样，代码正确执行并在表末尾插入克隆的第一行（如果不存在第二个参数，则其作用类似于 appendRow().
I get the error "Cannot read property 2 of undefined", which I guess means it's not recognising mainTable.rows.childNodes as a valid object to be indexing.
我收到错误“无法读取未定义的属性 2”，我猜这意味着它没有将 mainTable.rows.childNodes 识别为要编制索引的有效对象。
I have also tried the following method, and got the more elusive error "NotFoundError: DOM Exception 8" when testing it
我也尝试了以下方法，并在测试时得到了更难以捉摸的错误“NotFoundError：DOM Exception 8”
function AddRow()
{
var mainTable = document.getElementById('mainTable');
mainTable.insertBefore(
mainTable.rows[0].cloneNode(true),
mainTable.rows[2]);
}
EDIT: Note that mainTable.appendChild(mainTable.rows[0].cloneNode(true))works fine! Problem is I don't want to add it the the end of the table.
编辑：请注意，mainTable.appendChild(mainTable.rows[0].cloneNode(true))工作正常！问题是我不想将它添加到表格的末尾。
采纳答案by Brett Zamir
The confusion should be due to the fact that you are using the HTMLTableElementinterface (by using the rowsproperty)--which abstracts table access and thus can find the rows even though there is an intervening implicit tbody element--along with the regular DOM method (insertBefore) which expects the reference node to be a direct child of the node on which the method is invoked.
混淆应该是由于您正在使用HTMLTableElement接口（通过使用rows属性）——它抽象了表访问，因此即使有一个隐式的 tbody 元素也可以找到行——以及常规的 DOM 方法( insertBefore) 期望引用节点是调用该方法的节点的直接子节点。
As pointed out in another answer, you can use the insertRowmethod for consistent table abstraction via the HTMLTableElementinterface.
正如在另一个答案中指出的那样，您可以使用该insertRow方法通过HTMLTableElement接口进行一致的表抽象。
However, if you want to know how to do it along with the vanilla DOM way, you can do so by being aware of the assumed tbody:
但是，如果您想知道如何使用 vanilla DOM 方式进行操作，则可以通过了解假定的 tbody 来实现：
var mainTable = document.getElementById('myTable');
var tbody = mainTable.children[0]; // or to use HTMLTableElement, mainTable.tBodies[0]
// Mixing HTMLTableElement with vanilla DOM
tbody.insertBefore(mainTable.rows[0].cloneNode(true), mainTable.rows[2]);
// or pure vanilla DOM:
// tbody.insertBefore(tbody.children[0].cloneNode(true), tbody.children[2]);<table id="myTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>回答by isJustMe
You can calculate the table rows and use the table native methods to dinamically instert rows:
您可以计算表行并使用表本机方法来动态插入行：
function appendRow(){
var table = document.getElementById('myTable');
var middleRow = table.insertRow( Math.floor( table.rows.length / 2 ) );
var cell1 = middleRow.insertCell(0);
var textnode1=document.createTextNode('dom insterted');
cell1.appendChild( textnode1 );
}
function cloneRow(){
var table = document.getElementById('myTable');
var row = document.getElementById("rowToClone"); // find row to clone
var clonedRow = row.cloneNode(true);
clonedRow.id = "newID"; // change id or other attributes/contents
//table.appendChild(clonedRow); // add new row to end of table
var middleRow = table.insertRow( Math.floor( table.rows.length / 2 ) );
var cell1 = middleRow.insertCell(0);
cell1.appendChild( clonedRow );
}
check out this working demo
看看这个工作演示
