JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのDOMを使ってテーブルの行を削除する方法

JavaScriptでテーブルの行を削除するには、DOMが提供する deleteRow() メソッドを使用します。このメソッドは、テーブルオブジェクトに対して呼び出し、引数に行のインデックス番号（0から始まる）を指定することで、該当する行を簡単に削除できます。

サンプルコード

以下のコードを実行すると、テーブルの行を1行ずつ削除する動作を確認できます。「行を削除」ボタンをクリックするたびに、テーブルの先頭行（インデックス0）が削除されていきます。

<!DOCTYPE html>
<html>
   <head>
      <script>
      function captionFunc(x) {
         document.getElementById(x).createCaption().innerHTML = "Demo Caption";
      }
      </script>
   </head>
   <body>
      <table style="border:2px solid black" id="newtable">
         <tr>
            <td>One</td>
            <td>Two</td>
         </tr>
         <tr>
            <td>Three</td>
            <td>Four</td>
         </tr>
         <tr>
            <td>Five</td>
            <td>Six</td>
         </tr>
      </table>
      <p>
         <input type="button" onclick="captionFunc('newtable')" value="Display Table Caption">
      </p>
      <p>
         <input type="button" value="Delete Row" onclick="document.getElementById('newtable').deleteRow(0)">
      </p>
   </body>
</html>

コードの解説

このサンプルでは、IDが「newtable」のテーブルに対して deleteRow(0) を呼び出しています。引数の「0」はテーブルの先頭行を意味するため、ボタンをクリックするたびに上の行から順番に削除されます。

なお、特定の行を削除したい場合は、インデックス番号を変更してください。例えば deleteRow(1) と指定すれば、2行目が削除されます。また、テーブルの行数は tableObject.rows.length で取得できるため、この値と組み合わせれば、最終行の削除や全行の一括削除なども柔軟に実装できます。

  1. CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

    CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。レスポンシブテーブルのポイントレスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。width: 100%;

  2. HTML DOM テーブルの rows コレクションとは？使い方をサンプルコード付きで解説

    HTML DOM のテーブル rows コレクションは、HTML ドキュメント内のテーブルに含まれるすべての <tr> 要素のコレクションを返します。このコレクションを利用すると、JavaScript からテーブルの行数を取得したり、特定の行にアクセスしたりすることが簡単に行えます。構文rows コレクションの構文は以下のとおりです。object.rowsrows コレクションのプロパティrows コレクションには、以下のプロパティが用意されています。プロパティ説明lengthHTML ドキュメント内のコレクションに含まれる <tr> 要素の数を返します。rows コレ