Question

道歉，如果发布了类似的内容，但我试图删除按钮所在的行，而不仅仅是搜索结果似乎给我的最后一行。

我有以下代码添加到HTML表但onclick不起作用，删除按钮不起作用且addRow不起作用。为什么不？

java代码

function addRow() {

  var table = document.getElementById("createOrderTable");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  ... other cells ...

  var cell4 = row.insertCell(3);
  var btn = document.createElement("input");
  btn.type = "button";
  btn.value = "Close";
  btn.onclick = deleteRow('createOrderTable', rowCount);
  cell4.appendChild(btn); 

}

function deleteRow(id, row) {
  document.getElementById(id).deleteRow(row);
}

表格代码

<table id="createOrderTable" width="100%">                   
  <tr>
    <th>Count</th><th>Product</th><th>Mesh</th><th>Delete</th>
  </tr>
  <tr>
    <td>1</td><td>OL</td><td>200</td><td><button type="button" class="close" aria-hidden="true" onclick="deleteRow('createOrderTable', 1)">&times;</button></td>
  </tr>
</table>

如果我改变

btn.onclick = deleteRow('createOrderTable', rowCount );

到

btn.onclick = deleteRow('createOrderTable', rowCount + 1 );

我可以让行显示但是它会抛出

Uncaught IndexSizeError: Failed to execute 'deleteRow' on 'HTMLTableElement': The index provided (3) is greater than the number of rows in the table (3).

并且不显示按钮。我对这里的错误感到困惑。

Answer 1

行索引不是静态的，因此当您删除行时，如果删除索引较低的行，则其余行的行索引可能会更改。解决方案是根本不使用rowIndex，而只是使用DOM关系。

您可以通过将 this 传递给函数来获取对单击按钮的引用，然后运行父节点，直到到达TR元素并将其删除，例如

// Helper function:
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
  return null;
}    

function deleteRow(el) {
  var row = upTo(el, 'tr')
  if (row) row.parentNode.removeChild(row);
}

<table>
  <tr>
    <td>1</td><td>OL</td><td>200</td>
    <td><button type="button" onclick="deleteRow(this)">&times;</button></td>
  </tr>
  <tr>
    <td>2</td><td>AB</td><td>400</td>
    <td><button type="button" onclick="deleteRow(this)">&times;</button></td>
  </tr>
</table>

您还可以使用事件委派并在表上放置一个侦听器，然后使用关联的事件对象的目标属性来查看是否通过单击带有类靠近。如果是这样，请调用 deleteRow 并将元素引用作为参数传递。

Answer 2

更新

Check working example.

删除按钮所属的当前行将Tomcat的点击更改为：

1.7

或更改html中的按钮，如：

1.8

或使用

的JavaScript代码

<button>

删除功能如下：

onclick="this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex)"

Answer 3

你应该修改你的代码：

btn.onclick = deleteRow;

deleteRow声明：

function deleteRow() {
    this.parentElement.parentElement.remove();
}

用javascript删除表中的行

3 个答案:

更新