deleteRow()関数は動的テーブルの行を削除する問題

2年 ago
光, 明
1 minute

動的表に行を削除するには、次の方法を使用します：

  1. removeChild()を使ってください。
  2. 最初に、削除する行要素の親ノード（通常は
    要素）を取得します。
  3. その後、親ノードから指定された行要素をremoveChild()メソッドを使用して削除します。

以下は、例のコードです。

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

上記のコードでは、deleteRow() 関数が1つのパラメーター rowId を受け取り、削除する行要素のIDを表します。関数はまず document.getElementById() メソッドを使用して削除する行要素を取得し、次に removeChild() メソッドを使用して親ノードからその行要素を削除します。

  1. 行を削除する。

以下はサンプルコードです。

<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が渡されます。

上記の例コードを適切に変更して、特定の要求とテーブル構造に基づいて動的な表の行を削除する機能を実装することができます。

bannerAds