5

使用 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))效果很好！问题是我不想将它添加到表格的末尾。

4

2 回答 2

4

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

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

}

看看这个工作演示

于 2013-06-08T22:38:55.320 回答
4

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

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

但是，如果您想知道如何使用 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>

于 2013-06-08T23:47:04.587 回答