用javascript删除表中的行 [英] delete row in table with javascript

问题描述

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

Apologies if something similar has been posted but I am trying to delete a row the button is on and not just the last row as the search results seem to give me.

我有以下代码可以添加到 HTML 表格中，但是 onclick 不起作用，删除按钮不起作用并且 addRow 不起作用.为什么不?

I have the following code that adds to an HTML table but onclick doesn't work, the delete button doesn't work and addRow doesn't function. Why not?

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 );

我可以显示该行，但它会抛出

I can get the row to show but it throws

Uncaught IndexSizeError: Failed to execute 'deleteRow' on 'HTMLTableElement': 提供的索引 (3) 大于表中的行数 (3).

并且不显示按钮.我对我在这里做错了什么感到困惑.

and doesn't show the button. I'm confused about what I'm doing wrong here.

推荐答案

行索引不是静态的，因此当您删除行时，如果删除索引较低的行，剩余行的行索引可能会发生变化.一个解决方案是根本不使用 rowIndex，而只使用 DOM 关系.

The row index is not static, so as you delete rows, the row index of remaining rows can change if a row with a lower index is deleted. A solution is to not use rowIndex at all, and just use DOM relationships instead.

您可以通过将 this 传递给函数来获取对被点击按钮的引用，然后向上移动父节点直到到达 TR 元素并删除它，例如

You can get a reference to the button that was clicked by passing this to the function, then go up parent nodes until you reach a TR element and delete it, e.g.

// 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>

您也可以使用事件委托并在表上放置一个侦听器，然后使用关联事件对象的 target 属性查看事件是否是通过单击具有 关闭.如果是这样，请调用 deleteRow 并将元素引用作为参数传递给上述内容.

You can also use event delegation and put a single listener on the table, then use the associated event object's target property to see if the event was initiated by a click on a button with class close. If so, call deleteRow and pass the element reference as a parameter as for the above.

这篇关于用javascript删除表中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！