HTML DOMのTable insertRow()メソッドとは？使い方をサンプルコードで解説
HTML DOMのinsertRow()メソッドは、空の<tr>要素を新しく生成し、HTMLドキュメント上のテーブルに追加するためのメソッドです。JavaScriptから動的にテーブルへ行を追加したい場合に活用できます。
構文
insertRow()メソッドの基本構文は以下のとおりです。
object.insertRow(index)
indexには、行を挿入する位置を表す数値を指定します。先頭の行は「0」から始まります。indexを省略した場合は、テーブルの末尾に行が追加されます。また、指定したindexが有効な範囲外の場合はエラー（IndexSizeError）が発生するので注意しましょう。
サンプルコード
それでは、HTML DOMのTable insertRow()メソッドの具体的な使用例を見ていきましょう。
コード例
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
}
caption {
color: #db133a;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>DOM Table insertRow() Method Demo</h1>
<table border="2">
<tr>
<td>Name</td>
<td>Roll No.</td>
</tr>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</table>
<button onclick="create()" class="btn">Create Row</button>
<script>
function create() {
var table = document.querySelector('table');
var tableRow = table.insertRow(1);
tableRow.innerHTML = "<td>Maximilian</td><td>081717</td>";
}
</script>
</body>
</html>
コードの解説
このサンプルでは、ボタンがクリックされるとcreate()関数が実行されます。querySelector('table')でテーブル要素を取得し、insertRow(1)によってテーブルの2行目（インデックス1）の位置に新しい行を挿入しています。その後、innerHTMLを使って挿入した行にセル（<td>要素）の内容を設定しています。
実行結果
ブラウザで表示すると、次のように名前と出席番号を含むテーブルが表示されます。
「Create Row」ボタンをクリックしてみましょう。
ボタンをクリックすると、テーブルの指定した位置（この例では2行目）に「Maximilian / 081717」という新しい行が追加されていることが確認できます。
まとめ
insertRow()メソッドを使えば、JavaScriptだけで簡単にテーブルへ行を動的に追加できます。位置を指定できるため、任意の場所への挿入も可能です。テーブル操作を行うWebアプリケーション開発において、ぜひ覚えておきたい便利なメソッドです。
-
HTML DOM テーブルの createTFoot() メソッドとは？使い方をサンプルコード付きで解説
HTML DOM の createTFoot() メソッドは、HTML文書内のテーブルに対して空の <tfoot> 要素を生成し、テーブルに追加するためのメソッドです。テーブルのフッター行（合計欄や注釈など）を動的に作成したい場合に活用できます。構文createTFoot() メソッドの基本的な構文は以下のとおりです。object.createTFoot()引数は不要で、呼び出されたテーブルオブジェクトに <tfoot> 要素が存在しない場合は新しく生成して返します。すでに存在する場合は、既存の <tfoot> 要素をそのまま返します。createTFoot
-
HTML DOM Table createCaption()メソッドとは？構文と使い方をサンプルコードで解説
HTML DOM の Table createCaption() メソッドは、空の <caption> 要素を新しく生成し、HTML ドキュメント内のテーブルに追加するためのメソッドです。JavaScript を使ってテーブルにタイトル（キャプション）を動的に付加したい場合に活用できます。構文createCaption() メソッドの基本的な構文は以下のとおりです。object.createCaption()パラメータと戻り値このメソッドは引数を受け取りません。呼び出すと、新しく生成された <caption> 要素が戻り値として返されるため、その要素に対して textC