HTML DOM テーブルの deleteRow() メソッドとは？使い方を実例で解説
HTML DOM の deleteRow() メソッドは、HTML 文書内のテーブルから <tr> 要素（行）を削除するためのメソッドです。JavaScript を使って動的にテーブルの行を操作したい場合に非常に便利な機能で、ユーザーの操作に応じて行を削除するようなインターフェースを簡単に実装できます。
構文
deleteRow() メソッドの基本構文は以下のとおりです。
object.deleteRow(index)
パラメータについて
index には、削除したい行の位置を表す数値を指定します。インデックスは 0 から始まるため、最初の行が「0」、2行目が「1」となります。なお、-1 を指定すると最後の行を削除でき、引数を省略した場合も同様に最後の行が削除されます。
それでは、HTML DOM テーブルの deleteRow() メソッドの具体的な使用例を見ていきましょう。
サンプルコード
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
}
.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 deleteRow() Method Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
</table>
<button onclick="remove()" class="btn">Remove Row</button>
<script>
function remove() {
var tableFooter = document.querySelector('table').deleteRow(1);
}
</script>
</body>
</html>
このサンプルでは、ボタンがクリックされると remove() 関数が呼び出され、deleteRow(1) によってテーブルの2行目（インデックス1）にあたるデータ行が削除される仕組みです。
実行結果
ブラウザで表示すると、次のように名前と出席番号を含むテーブルが表示されます。
「Remove Row」ボタンをクリックすると、テーブルから該当する行が1つ削除されます。
-
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