このマニュアルでは、JavaScript を使用してテーブルに行を追加する手順を説明します。
JavaScript を使用して HTML テーブルに行を追加する方法は?
テーブルに行を追加するには、次の手順を使用します。
それぞれの手順を個別に確認しましょう。
方法 1: insertRow() メソッドを使用して HTML テーブルに行を追加する
「 挿入行() 」メソッドを使用して、テーブルの先頭に新しい行を追加します。新しい
テーブルの最後/最後に行を追加する場合は、インデックス「 -1 」を引数として。
構文
insertRow() メソッドを使用してテーブルに行を追加するには、次の構文を使用します。
テーブル。 挿入行 ( 索引 ) ;
ここ、 ' 索引 」は、テーブルの最後や最初など、新しい行を追加したい位置を示します。
例 1: テーブルの先頭/先頭に行を追加する
ここでは、HTML を使用して HTML ファイルにテーブルとボタンを作成します。 <テーブル> と <ボタン> タグ。このテーブルには、3 つの行と 3 つの列またはセルが含まれています。
< テーブル ID = 'テーブル' >< トレ >
< td > 行のセル 1 td >
< td > 行のセル 1 td >
< td > 行のセル 1 td >
トレ >
< トレ >
< td > 行のセル 2 td >
< td > 行のセル 2 td >
< td > 行のセル 2 td >
トレ >
< トレ >
< td > 行のセル 3 td >
< td > 行のセル 3 td >
< td > 行のセル 3 td >
トレ >
テーブル >
< br >
次に、「」を呼び出すボタンを作成します。 行を追加する（） 」ボタンをクリックした場合：
< ボタンタイプ = 'ボタン' オンクリック = '行を追加する（）' > クリックしてテーブルの上部に行を追加します ボタン >テーブルをスタイリングするために、以下に示すように、各セルとテーブルの境界線を設定します。
表、td {国境 : 1px ベタ黒 ;
}
ここで、JavaScript を使用してテーブルの先頭/先頭に行を追加します。これを行うには、「」という名前の関数を定義します。 行を追加する（） ボタンの onclick() イベントで呼び出されます。次に、「 getElementById() ' 方法。その後、「 挿入行() ” を渡すことによるメソッド 0 行がテーブルの先頭に追加されることを示すパラメーターとしてのインデックス。
次に、「 挿入セル() 行に追加されるセルの数を示すインデックスを渡すことによる」メソッド。最後に、「」を使用してセルにテキスト データまたはテキストを追加します。 インナーHTML ' 財産：
functionaddRow ( ) {var tableRow = 資料。 getElementById ( 'テーブル' ) ;
並んでいた = テーブル行。 挿入行 ( 0 ) ;
セル1 = 行。 挿入セル ( 0 ) ;
セル2 = 行。 挿入セル ( 1 ) ;
セル3 = 行。 挿入セル ( 2 ) ;
セル1。 インナーHTML = 「新しい行のセル」 ;
セル2。 インナーHTML = 「新しい行のセル」 ;
cell3. インナーHTML = 「新しい行のセル」 ;
}
出力でわかるように、ボタンをクリックすると、既存のテーブルの上部に新しい行が追加されます。
例 2: テーブルの最後に行を追加する
テーブルの最後/最後に行を挿入する場合は、「 -1 ” へのインデックス 挿入行() ' 方法。ボタンをクリックすると、最後に行が追加されます。
functionaddRow ( ) {var tableRow = 資料。 getElementById ( 'テーブル' ) ;
並んでいた = テーブル行。 挿入行 ( - 1 ) ;
セル1 = 行。 挿入セル ( 0 ) ;
セル2 = 行。 挿入セル ( 1 ) ;
セル3 = 行。 挿入セル ( 2 ) ;
セル1。 インナーHTML = 「新しい行のセル」 ;
セル2。 インナーHTML = 「新しい行のセル」 ;
cell3. インナーHTML = 「新しい行のセル」 ;
}
出力
別の方法に移りましょう！
方法 2: 新しい要素を作成して HTML テーブルに行を追加する
JavaScript メソッドを使用して新しい要素を作成しているテーブルに行を追加する別の方法があります。 createElement() 」メソッドと「 appendChild() ' 方法。 createElement() は
構文
指定された構文に従って、JavaScript を使用してテーブルに行を追加するための新しい要素を作成します。
資料。 createElement ( 「トレ」 ) ;ここで、「 トレ 」は表の行です。
例
以前に作成した同じ表を HTML で CSS ファイルとともに使用しますが、JavaScript ファイルでは「 createElement() ' 方法。次に、「 インナーHTML ' 財産。最後に、「 appendChild() 行にセルを追加してからテーブルに行を追加するメソッド:
functionaddRow ( ) {var tableRow = 資料。 getElementById ( 'テーブル' ) ;
並んでいた = 資料。 createElement ( 「トレ」 ) ;
セル1 = 資料。 createElement ( 'td' ) ;
セル2 = 資料。 createElement ( 'td' ) ;
セル3 = 資料。 createElement ( 'td' ) ;
セル1。 インナーHTML = 「新しい行のセル」 ;
セル2。 インナーHTML = 「新しい行のセル」 ;
cell3. インナーHTML = 「新しい行のセル」 ;
行。 appendChild ( セル1 ) ;
行。 appendChild ( セル2 ) ;
行。 appendChild ( セル3 ) ;
テーブル行。 appendChild ( 行 ) ;
}
出力は、新しい行がテーブルの最後に正常に追加されたことを示しています。
JavaScript を使用してテーブルに行を追加するためのすべてのメソッドをまとめました。
結論
テーブルに行を追加するには、insertRow() メソッドを使用するか、appendChild() メソッドや createElement() メソッドなどの JavaScript 定義済みメソッドを使用して新しい要素を作成します。インデックスを渡すことにより、insertRow() メソッドを使用して、テーブルの末尾の先頭に行を追加できます。このマニュアルでは、JavaScript を使用して、ボタンをクリックしてテーブルに新しい行を追加する手順を説明しました。