投稿者: 普通、Webページの表に行やセルを動的に追加・削除することはほとんどないと思う。そういった処理はサーバーサイドでやるのが手っ取り早いが、ページを読み込んだ後にユーザーのアクションに応じてWebAPI等でデータを取得し、表形式で表示するときはクライアントで処理させる必要がある。データの取得方法については別の機会に記事にしようと思うが、ここではJavaScriptで表の行を操作する方法を記しておく。
HTMLファイル
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テーブルに行を追加削除するテスト</title>
<meta charset="UTF-8" />
<script src="tabletest.js"></script>
</head>
<body>
<button onclick="addTableRow();">行を追加</button>
<button onclick="deleteTableRow();">行を削除</button>
<table id="table1" border="1"><!-- 表 -->
<tr>
<!-- 見出し -->
<td>コード</td>
<td>名前</td>
</tr>
</table>
</body>
</html>
JSファイル
tabletest.js
/********************************
* 表の一番下に行を追加
* 引数：なし
* 戻値：なし
**********************************/
function addTableRow() {
var table = document.getElementById('table1'); //表のオブジェクトを取得
var row = table.insertRow(-1); //行末に行(tr要素)を追加
var cell1 = row.insertCell(0); //セル(td要素)の追加
var cell2 = row.insertCell(1);
cell1.innerHTML = 'code' + (table.rows.length - 1); //セルにデータを挿入する
cell2.innerHTML = 'name' + (table.rows.length - 1);
}
/********************************
* 表のいちばん下の行を削除
* 引数：なし
* 戻値：なし
**********************************/
function deleteTableRow() {
var table = document.getElementById('table1'); //表のオブジェクトを取得
var row_num = table.rows.length; //表の行数を取得
if (row_num>1) {
//表に二行以上あるとき末尾行を削除（見出し行は削除しない）
table.deleteRow(row_num - 1); //末尾行を削除
}
}
ブラウザでHTMLファイルを開くと下のようなページが表示されるはずだ。
「行を追加」ボタンをクリックすると表に一行追加され、「行を削除」ボタンをクリックすると一行削除される。
insertRow()メソッドの引数を-1にすると末尾に追加されるが、特定の位置に行を挿入するときは、insertRow()メソッドの引数に既存行のインデックスを渡す。すると既存行が一段下にずれて新しい行が指定の位置に挿入される。