Question

我有一个表，其中每一行都有唯一的ID。假设有id ='id25'和id ='id26'的行。我需要在id ='id25'的行之后插入一个新行。我在没有jQuery的情况下使用Vanilla JS。

我试过这个：

var refElement = document.getElementById('id'+id);
var newrow = document.createElement("tr");
if (refElement) {
    refElement.insertBefore(newrow, refElement.nextSibling);
}

但它引发了一个错误说法 Failed to execute 'insertBefore' on 'Node'

要插入新节点的节点不是此节点的子节点。

我知道如何在表的顶部或底部插入行，但现在我有一个id作为对特定行的引用。

欢迎任何建议

Answer 1

您希望插入refElement的父，而不是refElement本身：

refElement.parentNode.insertBefore(newrow, refElement.nextSibling);
// -------^^^^^^^^^^^

var id = 1;
var refElement = document.getElementById('id' + id);

var newrow = document.createElement("tr");
newrow.innerHTML = "<td>new row</td>";
if (refElement) {
  refElement.parentNode.insertBefore(newrow, refElement.nextSibling);
}

<table>
  <tbody>
    <tr id="id1"><td>refElement</td></tr>
    <tr><td>original next sibling</td></tr>
  </tbody>
</table>

（是的，对于任何想知道的人，即使refElement是表格中的最后一行，它也会有效。）

每条评论插入五行：

var id = 1;
var refElement = document.getElementById('id' + id);

var n, newrow;
if (refElement) {
  for (n = 0; n < 5; ++n) {
    newrow = document.createElement("tr");
    newrow.innerHTML = "<td>new row #" + n + "</td>";
    refElement.parentNode.insertBefore(newrow, refElement.nextSibling);
  }
}

<table>
  <tbody>
    <tr id="id1">
      <td>refElement</td>
    </tr>
    <tr>
      <td>original next sibling</td>
    </tr>
  </tbody>
</table>

请注意出现的顺序。如果你想要它们在0 - 4顺序而不是：

var id = 1;
var refElement = document.getElementById('id' + id);

var n, newrow;
if (refElement) {
  for (n = 0; n < 5; ++n) {
    newrow = document.createElement("tr");
    newrow.innerHTML = "<td>new row #" + n + "</td>";
    refElement.parentNode.insertBefore(newrow, refElement.nextSibling);
    refElement = refElement.nextSibling;  // *** This is the change
  }
}

<table>
  <tbody>
    <tr id="id1">
      <td>refElement</td>
    </tr>
    <tr>
      <td>original next sibling</td>
    </tr>
  </tbody>
</table>

Answer 2

function addRowAfter(rowId){
    var refElement = document.getElementById('id'+id);

    var newrow= document.createElement('tr');

    refElement.parentNode.insertBefore(newrow, refElement.nextSibling );
    return newRow;
}

检查一下。

Javascript在具有特定id的行之后插入行

2 个答案: