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
  1. 匿名

    サンプルで行を追加した後、一番下以外の行を削除した後に行を追加を繰り返すと、中の数字が「4-*」ばかりになります。なんとかならないでしょか。

  2. 匿名

    表の色を一行毎に自動的に変える方法も教えて頂きたいです。
    CSSで管理しているのでしょうか?

  3. 匿名

    「行数取得」 のサンプルソースに誤りがあるようです。

    [引用]
    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; // 行数

    以上、宜しくお願いします。

    • 管理人

      ご指摘ありがとうございます。
      修正しておきました。

コメントを残す