Question

使用Javascript，我试图在表格的中间添加一个新表格行，其中新表格行是其中一个预先存在的行的副本。

在stackoverflow上有很多类似的问题，但似乎没有一个能帮我解决这个问题。

function AddRow()
{
    var mainTable = document.getElementById('mainTable');

    mainTable.insertBefore(
        mainTable.rows[0].cloneNode(true),
        mainTable.rows.childNodes[2]);
}

我知道在传递给insertBefore（）的最后一个变量中存在问题，好像我把它留空了代码正确执行并在表的末尾插入克隆的第一行（如果没有第二个参数，它就行动了比如appendRow().

我收到错误“无法读取未定义的属性2”，我猜这意味着它不会将mainTable.rows.childNodes识别为要编制索引的有效对象。

我也尝试了以下方法，并在测试时得到了更难以捉摸的错误“NotFoundError：DOM Exception 8”

function AddRow()
{
    var mainTable = document.getElementById('mainTable');

    mainTable.insertBefore(
        mainTable.rows[0].cloneNode(true),
        mainTable.rows[2]);
}

编辑：请注意mainTable.appendChild(mainTable.rows[0].cloneNode(true))工作正常！问题是我不想将它添加到表的末尾。

Answer 1

您可以计算表行并使用表本机方法动态插入行：

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 );   

}

查看此工作demo

Answer 2

混淆应该是因为您正在使用HTMLTableElement接口（通过使用rows属性） - 它抽象表访问，因此即使存在，也可以找到行插入隐式tbody元素 - 以及常规DOM方法（insertBefore），它期望引用节点是调用该方法的节点的直接子节点。

正如另一个答案中所指出的，您可以使用insertRow方法通过HTMLTableElement接口进行一致的表抽象。

但是，如果您想知道如何与vanilla DOM方式一起使用，您可以通过了解假定的tbody来实现：

<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>

<script>

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]);

</script>

使用Javascript将表行添加到表的中间

2 个答案: