deleteRow()删除动态表格行的问题

小亿

2023-12-20 17:46:26

栏目: 编程语言

要删除动态表格中的行，可以使用以下方法：

使用JavaScript的 removeChild() 方法删除指定的行元素。
- 首先，获取要删除的行元素的父节点（通常是 <tbody> 元素）。
- 然后，使用 removeChild() 方法从父节点中删除指定的行元素。

以下是一个示例代码：

function deleteRow(rowId) {
  var row = document.getElementById(rowId);
  if (row) {
    row.parentNode.removeChild(row);
  }
}

在上面的代码中，deleteRow() 函数接受一个参数 rowId，该参数表示要删除的行元素的 ID。函数首先通过 document.getElementById() 方法获取要删除的行元素，然后使用 removeChild() 方法从父节点中删除该行元素。

在动态表格中的每一行添加一个删除按钮，并为每个按钮添加一个点击事件监听器。当点击删除按钮时，调用 deleteRow() 函数删除相应的行。

以下是一个示例代码：

<table id="myTable">
  <tbody>
    <tr id="row1">
      <td>Row 1</td>
      <td><button onclick="deleteRow('row1')">Delete</button></td>
    </tr>
    <tr id="row2">
      <td>Row 2</td>
      <td><button onclick="deleteRow('row2')">Delete</button></td>
    </tr>
  </tbody>
</table>

在上面的代码中，每个行都包含一个删除按钮，点击按钮时会调用 deleteRow() 函数，并传递相应的行元素的 ID。

可以根据具体的需求和表格结构，适当修改上述示例代码来实现删除动态表格行的功能。

deleteRow()删除动态表格行的问题

最新问答

相关标签