Javascriptでtableタグに行、列の追加や削除を行う

Javascriptでtableタグに行、列の追加や削除を行う
Javascriptで行うテーブル操作を一通りまとめました。
行列の操作やセルの取得方法などなど、サンプルコードもあります。

テーブルの要素を取得
// IDからテーブルを取得
var table = document.getElementById("table_id");
こちらはテーブルの要素を取得できればいいので自分の好みidから取得してます。

行数取得
var table = document.getElementById("table_id");
var rows = table.rows.length; // 行数

行追加
var table = document.getElementById("table_id");
// -1で末尾に追加。インデックスで指定の位置に追加も可能
var rows = table.insertRow(-1);
※行の追加だけ行うとtrタグのみの追加なので同時にセルの追加も行いましょう。

行削除
var table = document.getElementById("table_id");
// 0で先頭を削除。インデックスを指定する。
var rows = table.deleteRow(0);

列数取得
var table = document.getElementById("table_id");
var cols = table.rows[0].cells.length; // 列数

セル

セル取得
var table = document.getElementById("table_id");
var cell = table.rows[0].cells[0]; // セルオブジェクト取得
cell.innerHTML = 'Cell'; // セル内の値を「Cell」に書き換え

セル追加
var table = document.getElementById("table_id");
var rows = table.insertRow(-1);
// -1で列末尾に追加。インデックスで指定の位置に追加も可能
var cell = rows[0].insertCell(-1);

セル削除
var table = document.getElementById("table_id");
// -1で末尾に追加。インデックスで指定の位置に追加も可能
table.rows[0].deleteCell(-1);

サンプル

1-1 1-2
2-1 2-2
3-1 3-2

上記サンプルのコードです。
長いので隠しています。


Javascriptカテゴリの最新記事