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

JavaScript DOMを使ってテーブルに行を追加する方法

JavaScriptでテーブルに行を追加するには、DOMメソッドのinsertRow()を使用します。このメソッドは、指定した位置に新しい行（<tr>要素）を挿入し、その行への参照を返します。さらに、行に対してinsertCell()メソッドを呼び出すことで、新しいセル（<td>要素）を追加できます。

insertRow()メソッドの基本

insertRow()メソッドの構文は以下のとおりです。

tableObject.insertRow(index)

引数のindexには、行を挿入する位置を数値で指定します。0を指定するとテーブルの先頭に、引数を省略すると末尾に行が追加されます。

サンプルコード

以下のコードを実行すると、ボタンをクリックするたびにテーブルの先頭へ行を1つずつ追加できることを確認できます。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function rowFunction(x) {
            var a = document.getElementById(x).insertRow(0);
            var b = a.insertCell(0);
            var c = a.insertCell(1);
            b.innerHTML = c.innerHTML = "row";
         }
      </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="rowFunction('newtable')" value="Add a row">
      </p>
   </body>
</html>

コードの解説

このサンプルの処理の流れは以下のとおりです。

1. 行の挿入：
document.getElementById(x).insertRow(0)により、IDが「newtable」のテーブルの先頭（インデックス0）に新しい行を挿入します。戻り値として、挿入された行オブジェクトが変数aに代入されます。

2. セルの追加：
insertCell(0)とinsertCell(1)を呼び出すことで、新しく作成した行に2つのセルを追加し、それぞれ変数bとcに格納します。

3. セルへのテキスト設定：
innerHTMLプロパティを使って、両方のセルに「row」というテキストを設定しています。

4. ボタンによる実行：
input要素のonclick属性にrowFunction('newtable')を指定しているため、ボタンをクリックするたびに行が追加されます。

まとめ

テーブルへの行追加は、insertRow()で行を作成し、insertCell()でセルを追加するという2段階の処理で実現できます。動的にテーブルの内容を更新したい場合に非常に便利なメソッドなので、ぜひ活用してみてください。

  1. HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方

    HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n

  2. C++を使ってOpenCVにトラックバーを追加する方法

    トラックバー（Trackbar）は、OpenCVでさまざまなパラメータを直感的に操作するためのスライダー型のUI部品です。トラックバーを活用すれば、ソースコード内の数値をその都度書き換えて再コンパイルする必要がなくなり、明るさやコントラストなどのパラメータをマウス操作だけでグラフィカルに調整できます。これにより、リアルタイムに変化を確認しながら動的な画像エフェクトを作成することが可能になります。 以下のプログラムは、C++を使ってOpenCVウィンドウにトラックバーを追加し、画像の明るさとコントラストを動的に変更する例です。 サンプルコード #include<iostream> #