Javascript在具有特定id的行之后将行插入表中
Javascript insert row into table after row with certain id
我有一个表,其中每一行都有其唯一的id。假设有一些行的id分别为'id25'和'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作为对特定行的引用。
任何建议都欢迎
您希望插入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>
function addRowAfter(rowId){
var refElement = document.getElementById('id'+id);
var newrow= document.createElement('tr');
refElement.parentNode.insertBefore(newrow, refElement.nextSibling );
return newRow;
}
检查一下。
相关文章:
- 如何在 d3.js 中的同级元素之后插入
- 在原始克隆之后插入克隆
- 如何在字符串中的第二个字符之后插入字符
- 我可以在 Javascript 中的 onclick 中的“this”之后插入字符串吗?
- 如何使用原型.js在文本块之后插入内容
- 通过jQuery在最后一项之后插入
- 如何使用jQuery在具有类的特定元素之后插入HTML
- 如何在第二个元素之后插入
- 如何在文本的每 5,000 个字符之后的第一个
或
之后插入一个 - jQuery 在最后一个元素之后插入
- Node.js:在文本文件中的特定行之后插入一行
- 在Meteor方法中承诺之后插入集合
- 在“”之后插入文本;这个“;使用javascript输入元素
- 在动态生成的表之后插入一个来自jQuery的跨度
- 找到一个元素,然后在下一个元素之后插入内容
- 在每个函数的特定结果之后插入元素
- 具有相同类的多个元素-仅在最后一个元素之后插入
- 在特定字符之后插入文本
- 在argv[2]NodeJ之后插入参数
- 在没有自动丢失标记的图元之前和之后插入内容