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 |
上記サンプルのコードです。
長いので隠しています。
関連記事
Comments
サンプルで行を追加した後、一番下以外の行を削除した後に行を追加を繰り返すと、中の数字が「4-＊」ばかりになります。なんとかならないでしょか。
表の色を一行毎に自動的に変える方法も教えて頂きたいです。
ＣＳＳで管理しているのでしょうか？
こちらのページで色付けの方法を記載していますので参考にしてください。
http://scrap.php.xdomain.jp/css_nth-child/
「行数取得」 のサンプルソースに誤りがあるようです。
[引用]
var table = document.getElementById(“table_id”);
var rows = tbl.rows.length; // 行数
2行目の
>var rows = tbl.rows.length; // 行数
正しくは
var rows = table .rows.length; // 行数
だと思われます。
[修正後]
var table = document.getElementById(“table_id”);
var rows = table .rows.length; // 行数
以上、宜しくお願いします。
ご指摘ありがとうございます。
修正しておきました。