如何使用纯 JS 在每个 <tr> 之后插入 <tr>

Question

我想在每个现有 <tr> 之后插入新的 <tr>。我的函数：

var element = document.querySelector('tr.cart-item');
var newElement = document.createElement('tr');
newElement.className = "tr-spacer";
var elementParent = element.parentNode;
elementParent.insertBefore(newElement, element.nextSibling);

但它只在第一个 <tr> 之后插入 <tr>，是否可以在每个现有的 <tr> 之后插入 <tr>？我也试过 querySelectorAll 或 insertRow 但它似乎不起作用。谢谢

Answer 1

与 querySelectorAll 配合使用效果很好。你没有显示你的代码试图使用它，但你会有一个循环：

var list = document.querySelectorAll('tr.cart-item');
for (var i = 0; i < list.length; ++i) {
    var element = list[i];
    var newElement = document.createElement('tr');
    newElement.className = "tr-spacer";
    element.parentNode.insertBefore(newElement, element.nextSibling);
}

或在现代浏览器上（或使用 polyfill，这是微不足道的；更多内容在中）：

document.querySelectorAll('tr.cart-item').forEach(function(element) {
    var newElement = document.createElement('tr');
    newElement.className = "tr-spacer";
    element.parentNode.insertBefore(newElement, element.nextSibling);
});

或（同样是现代浏览器）：

for (const element of document.querySelectorAll('tr.cart-item') {
    const newElement = document.createElement('tr');
    newElement.className = "tr-spacer";
    element.parentNode.insertBefore(newElement, element.nextSibling);
}

Answer 2

您必须遍历 <tr> 标签。

首先 select 他们都使用 querySelectorAll 而不是 querySelector。

然后遍历它们并在每个之后添加一个新的。

作为@T.J。 Crowder 在评论中指出，请注意如何通过检查 nextElementSibling 是否为真来检查当前 <tr> 是否有下一个兄弟姐妹。

let lines = document.querySelectorAll('tr');

for(let line of lines){
  let newLine = document.createElement('tr');
  newLine.innerText = 'Inserted';
  if(line.nextElementSibling) line.parentNode.insertBefore(newLine, line.nextElementSibling);
}

<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>

Answer 3

您需要使用 querySelectorAll 获取所有匹配选择器的元素，然后在裸 for 循环中或使用 Array.prototype.forEach 在每个元素后创建广告插入新的 tr：

[].forEach.call(document.querySelectorAll('tr.cart-item'), function (element) {
  var newElement = document.createElement('tr');
  newElement.className = "tr-spacer";
  element.parentNode.insertBefore(newElement, element.nextSibling);
});

<table>
  <tr class="cart-item">
    <td>First</td>
  </tr>
  <tr class="cart-item">
    <td>Second</td>
  </tr>
  <tr class="cart-item">
    <td>Third</td>
  </tr>
</table>

如何使用纯 JS 在每个 <tr> 之后插入 <tr>

How to insert <tr> after every <tr> with pure JS

javascript

insert

tr