使用javascript刪除表格中的行

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關系。

你可以得到的點擊來自這個傳遞給函數，該按鈕的引用，那么直到你到達一個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> 

您還可以使用事件委托並將單個偵聽器放在表上，然后使用關聯的事件對象的target屬性查看事件是否是通過單擊類為close的按鈕啟動的。 如果是這樣，則調用deleteRow並將元素引用作為參數傳遞給上述對象。

Answer 2

更新

檢查工作示例。

刪除按鈕所屬的當前行將<button> onclick更改為：

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

或更改html中的按鈕，例如：

<input type="button" onclick="deleteRow(this)">X</button>

或通過JavaScript代碼使用

btn.setAttribute('onclick','deleteRow(this)');

刪除功能就像：

function deleteRow(el) {
    var tbl = el.parentNode.parentNode.parentNode;
    var row = el.parentNode.parentNode.rowIndex;

    tbl.deleteRow(row);
}

Answer 3

您應該像這樣修改代碼：

btn.onclick = deleteRow;

而deleteRow聲明如下：

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