deleteRow()刪除動(dòng)態(tài)表格行的問(wèn)題

小億
105
2023-12-20 17:46:26

要?jiǎng)h除動(dòng)態(tài)表格中的行，可以使用以下方法：

  1. 使用JavaScript的 removeChild() 方法刪除指定的行元素。
    • 首先，獲取要?jiǎng)h除的行元素的父節(jié)點(diǎn)（通常是 <tbody> 元素）。
    • 然后，使用 removeChild() 方法從父節(jié)點(diǎn)中刪除指定的行元素。

以下是一個(gè)示例代碼：

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

在上面的代碼中，deleteRow() 函數(shù)接受一個(gè)參數(shù) rowId，該參數(shù)表示要?jiǎng)h除的行元素的 ID。函數(shù)首先通過(guò) document.getElementById() 方法獲取要?jiǎng)h除的行元素，然后使用 removeChild() 方法從父節(jié)點(diǎn)中刪除該行元素。

  1. 在動(dòng)態(tài)表格中的每一行添加一個(gè)刪除按鈕，并為每個(gè)按鈕添加一個(gè)點(diǎn)擊事件監(jiān)聽器。當(dāng)點(diǎn)擊刪除按鈕時(shí)，調(diào)用 deleteRow() 函數(shù)刪除相應(yīng)的行。

以下是一個(gè)示例代碼：

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

在上面的代碼中，每個(gè)行都包含一個(gè)刪除按鈕，點(diǎn)擊按鈕時(shí)會(huì)調(diào)用 deleteRow() 函數(shù)，并傳遞相應(yīng)的行元素的 ID。

可以根據(jù)具體的需求和表格結(jié)構(gòu)，適當(dāng)修改上述示例代碼來(lái)實(shí)現(xiàn)刪除動(dòng)態(tài)表格行的功能。

0 踩