试图创建一个带有删除每一行的按钮的表，但它只适用于一行(javascript）

Trying to create a table with buttons to remove each row, but it only works on one row(javascript)?

本文关键字：一行 按钮 javascript 适用于 创建 一个 删除      更新时间：2023-09-26

这是我的javascript，一旦我单击一个按钮，它就会删除该行，但其他按钮什么都不做。

var removeRowBtns = document.getElementsByClassName("removeRowBtn")
var tableRows = document.getElementsByTagName("tr")
for(var i = 0; i < removeRowBtns.length; i++) {
removeRowBtns[i].addEventListener("click", function() {
  tableRows[i].parentNode.removeChild(tableRows[i]);
    });
}

这是我的HTML:

<table class="table table-bordered">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Email Address</th>
  <th>Remove</th>
</tr>
<tr>
  <td>name</td>
  <td>name</td>
  <td>email</td>
  <td><button class="btn btn-danger removeRowBtn">X</button></td>
</tr>
<tr>
  <td>name</td>
  <td>name</td>
  <td>email</td>
  <td><button class="btn btn-danger removeRowBtn">X</button></td>
</table>
  <script type="text/javascript" src="table.js"></script>

您的事件处理程序在循环完成后很长一段时间执行。

变量i始终是循环的最后一个值。将按钮与需要删除的表行关联，并使用事件处理程序的e.target获取对它的引用

例如，您可以使用以下类型的标记：

<tr id="r15"></tr>  <input type="button" rawLink="r15" value="Delete"></input>

和JS像这个

for(var i = 0; i < removeRowBtns.length; i++) {
   removeRowBtns[i].addEventListener("click", function(e) {
      var raw = document.getElementById(e.target.getAttribute("rawLink"));
      raw.parentNode.removeChild(raw);
    });
}
相关文章：