Javascriptでtableタグに行、列の追加や削除を行う
Javascriptで行うテーブル操作を一通りまとめました。
行列の操作やセルの取得方法などなど、サンプルコードもあります。
行
テーブルの要素を取得1 2 | // IDからテーブルを取得var table = document.getElementById("table_id"); |
行数取得
1 2 | var table = document.getElementById("table_id");var rows = table.rows.length; // 行数 |
行追加
1 2 3 | var table = document.getElementById("table_id");// -1で末尾に追加。インデックスで指定の位置に追加も可能var rows = table.insertRow(-1); |
行削除
1 2 3 | var table = document.getElementById("table_id");// 0で先頭を削除。インデックスを指定する。var rows = table.deleteRow(0); |
列
列数取得1 2 | var table = document.getElementById("table_id");var cols = table.rows[0].cells.length; // 列数 |
セル
セル取得1 2 3 | var table = document.getElementById("table_id");var cell = table.rows[0].cells[0]; // セルオブジェクト取得cell.innerHTML = 'Cell'; // セル内の値を「Cell」に書き換え |
セル追加
1 2 3 4 | var table = document.getElementById("table_id");var rows = table.insertRow(-1);// -1で列末尾に追加。インデックスで指定の位置に追加も可能var cell = rows[0].insertCell(-1); |
セル削除
1 2 3 | 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; // 行数
以上、宜しくお願いします。
ご指摘ありがとうございます。
修正しておきました。