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

时间:2016-08-19 11:37:22

标签: javascript

我有一个表,其中每一行都有唯一的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作为对特定行的引用。

欢迎任何建议

2 个答案:

答案 0 :(得分:3)

您希望插入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>

答案 1 :(得分:0)

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

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

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

检查一下。