このブログ投稿では、JavaScript で動的テーブルを作成するプロセスを紹介します。
JavaScript でテーブルを動的に作成する方法は?
JavaScript で動的テーブルを作成する方法を説明する例を見てみましょう。
例
まず、新しい HTML ドキュメントに次の行を記述して、データを取得し、動的に追加して表に表示するフォームを作成します。
< 部門ID = 「マイフォーム」 >
< h4 > 以下のフォームに記入してください ： h4 >
< ラベル > 名前 ： ラベル >
< 入力方式 = '文章' ID = '名前' >< br >< br >
< ラベル > 性別 ： ラベル >
< 入力方式 = '文章' ID = '性別' >< br >< br >
< ラベル > 指定 ： ラベル >
< 入力方式 = '文章' ID = '指定' >< br >< br >
< ラベル > 接合 日にち ： ラベル >
< 入力方式 = '日にち' ID = '日にち' >< br >< br >
< ボタン ID = '追加' 価値 = '追加' > テーブルにデータを追加 ボタン >
分周 >
上記のコード スニペットでは、次のようになります。
- まず、見出し「 以下のフォームに記入してください。 」。
- 「」の入力フィールドを作成する 名前 」、「 性別 」、「 指定 '、 と ' 入社日 」 割り当てられた ID の「 名前 」、「 性別 」、「 指定 '、 と ' 日にち 」それぞれ、ユーザーから入力値を取得します。
- これらの ID は、JavaScript で要素の参照を取得するために使用されます。
- 次に、「 オンクリック 」を呼び出すプロパティ addTableRow() 」関数をスクリプト ファイルに追加し、テーブルにデータを追加して表示します。
ここで、HTML ファイルに次のコード行を記述して、データが動的に追加されるテーブル構造を作成します。
< 分周 >
< h4 > 従業員記録 b > h4 >
< 中心 >
< テーブル ID = 「テーブルデータ」 国境 = 「1」 セルパディング = '2' >
< トレ >
< td >< b > 名前 b > td >
< td >< b > 性別 b > td >
< td >< b > 指定 b > td >
< td >< b > 入社日 b > td >
トレ >
テーブル >
中心 >
分周 >
上記のコードでは:
- ID「」でテーブルを作成します テーブルデータ 」をスクリプト ファイルで使用して、このテーブルの参照を取得し、データを追加します。
- テーブルには 4 つの列があります。 名前 」、「 性別 」、「 指定 '、 と ' 入社日 列名に従ってデータを保存します。
HTML ファイルを実行すると、次のブラウザー出力が得られます。
JavaScript を使用して動的にテーブルを作成する機能を追加しましょう。スクリプト ファイルまたはタグで、テーブルを動的に作成する次のコードを使用します。
関数 addTableRow ( ) {だった 名前 = 資料。 getElementById ( '名前' ) ;
だった 性別 = 資料。 getElementById ( '性別' ) ;
だった 指定 = 資料。 getElementById ( '指定' ) ;
だった 日にち = 資料。 getElementById ( '日にち' ) ;
だった テーブル = 資料。 getElementById ( 「テーブルデータ」 ) ;
だった 行数 = テーブル。 行 . 長さ ;
だった 行 = テーブル。 挿入行 ( 行数 ) ;
行。 挿入セル ( 0 ) . インナーHTML = 名前。 価値 ;
行。 挿入セル ( 1 ) . インナーHTML = 性別。 価値 ;
行。 挿入セル ( 2 ) . インナーHTML = 指定。 価値 ;
行。 挿入セル ( 3 ) . インナーHTML = 日にち。 価値 ;
}
上記のスニペットでは:
- まず、関数を定義します」 addTableRow() 」で、HTML ボタンのクリック イベントがトリガーされます。
- 次に、「 getelementById() 」メソッドを作成し、それらを変数に格納します。
- これらの変数は、HTML を使用して入力フィールドの値を取得するために使用されます。 価値 」プロパティを使用して、テーブル内の個々のセルにそれらを設定します。 インナーHTML ' 財産。
- 「」を利用してテーブルに行を追加します テーブル.行.長さ 」プロパティを作成し、そこに値を格納します。
出力
上記の出力は、JavaScript を使用してフォームにデータを追加することにより、動的テーブルが正常に作成されたことを示しています。
結論
動的テーブルは、さまざまな HTML プロパティと JavaScript の定義済みメソッドを使用して作成されます。まず、HTML ファイルでフォームを作成し、「 getElementById() 」メソッドを使用して、入力した値を取得します。 価値 ' 財産。 「 インナーHTML ' 財産。このブログ投稿では、JavaScript で動的テーブルを作成するプロセスを示します。