【JavaScript】テーブルの動的な操作（行の追加・削除／列の追加・削除／1行ずつループ／全セルループ）

JavaScript／jQueryを使用したテーブルの動的な操作方法を解説します。

この操作はテーブルタグの自動生成機能のプレビューおよびデータ入力用に使用しました。

1行ずつループ

始めに1行ずつループする方法を解説します。

//すべての行のデータを配列で取得
var rows = $("#drereum-table tbody").children();
//行数を取得
 var rowsNum= rows.length;
//1行ずつループ
for(var i = 0; i < rowsNum; i++){
    //行を取得
    var row = $(rows[i]);
    //セルの配列を取得
    var cells = $(row.children());
    //セルの数（列数）を取得
    var colNum = cells.length;
}

色々な書き方が出来ますが、これが最も平易な書き方だと思います。

不要な行もありますが、わかりやすさ重視です。

まずはすべての行データを取得します。

ここではdrereum-tableというIDのテーブルの全行データを取得しています。

var rows = $("#drereum-table tbody").children();

rows変数にはすべての行が1行ずつ配列で格納されています。

つまり、rows変数のlengthをチェックすればそのテーブルに含まれる行数が取得できます。

var rowsNum= rows.length;

行数がわかりましたから、ループで1行ずつチェックしてみましょう。

for(var i = 0; i < currentRowNum; i++){}

なんの変哲もないループ処理です。

ループに入りました。

それでは1行分のデータを取得しましょう。

var row = $(rows[i]);

rows配列には全行が配列で格納されています。

他にも色々な取得方法が可能です。

row変数に行データが格納されていますから、そのなかのセルの情報を見てみましょう。

var cells = $(row.children());

cells変数には1セルずつが配列になって格納されています。

もちろんcells変数のlengthをチェックすることで列数も取得することができます。

var colNum = cells.length;

全セルループ

1行ずつループすることが出来たということは、更にループ処理をひとつ加えることで全セルをループで回すことができます。

//すべての行のデータを配列で取得
var rows = $("#drereum-table tbody").children();
//行数を取得
 var rowsNum= rows.length; //1行ずつループ
for(var i = 0; i < currentRowNum; i++){
    //行を取得
    var row = $(rows[i]);
    //セルの配列を取得
    var cells = $(row.children());
    //セルの数（列数）を取得
    var colNum = cells.length;
    for(var j = 0; j < colNum ; j++){
        //セルを取得
        var cell = $(cells[j]);
    }
}

先程の「1行ずつループ」の処理に赤字の4行を追加しています。

1行ずつループの処理は先程説明したとおりですが、次にもう1つループを追加して行内の全セルをチェックしていきます。

for(var j = 0; j < colNum ; j++){}

なんの変哲もないループです。

該当行内のセルの情報は、既にcells配列に含まれていますから、その中身をチェックすればセルの情報を確認したり変更したりすることができます。

var cell = $(cells[j]);

行の追加

「1行ずつループ」の処理ができれば行の追加処理も簡単です。

行を追加する方法は、シンプルにappendメソッドを追加して「<tr><td></td>….</tr>」というタグを追加しても構いません。

やってみるとこんな感じになります。

$(“#drereum-table tbody”).append(“<tr><td></td><td></td><td></td></tr>”);

基本的に行の構成が変わることはなく、上の行をコピーする方が簡単です。

シンプルに最終行をコピーして最後尾に追加するのであれば、以下の1行で済んでしまいます。この方法が一般的みたいです。

$("#drereum-table tbody tr:last-child").clone(true).appendTo("#drereum-table tbody");

以下のセレクタで、drereum-tableというIDのテーブルの最終行が選択できます。

$("#drereum-table tbody tr:last-child")

次にcloneメソッドで最終行をコピーして、appendToメソッドでdrereum-tableにコピーした内容を追加しています。

複数行まとめて追加する場合にも、この処理を繰り返すことで実現可能です。

また、セルに入力フォームがある場合には、新しい行の入力フォームの中身は空にしたいものです。

1セルずつループさせる方法でも構いませんが、やはりセレクタを用いた方法がシンプルでよく使われるみたいです。

$("#tag-table tbody tr:last-child input").val("");

このセレクタでは、最終行のすべてのinput要素のvalueに空白を設定しています。

例えばinput要素のname属性で指定したり、

$("#tag-table tbody tr:last-child input[name='dream']").val("");

input要素のtypeで指定することも可能です。

$("#tag-table tbody tr:last-child input[type='text']").val("");

行の削除

行の削除は追加に比べるととっても簡単です。

//すべての行のデータを配列で取得
var rows = $("#drereum-table tbody").children();
//行を削除
rows[2].remove();

drereum-tableというIDのテーブルの各業をrows変数で取得し、その中の2番目の要素（3行目）を削除しています。

ループさせながら行を削除すると行数が変動するためエラーの原因になります。

どうしてもループさせる場合にはループごとにループの上限回数を見直す必要があります。

列の追加

テーブルの列を追加するケースはあんまり多くないと思います。

行の追加と同じようにシンプルにタグを追加していく方法とセレクタを使ってまとめて処理する方法があります。

ただし、セレクタを使う場合には選択したセルを一様にコピーしてしまいます。

そのためよほどシンプルな機能でもない限り不都合が出ることが多いです。

列を追加する場合には、「1行ずつループ」の処理を使って1行ずつセルを1つ追加していく処理をする方が結果的に利便性が高まると思います。

//すべての行のデータを配列で取得
var rows = $("#drereum-table tbody").children();
//行数を取得
 var rowsNum= rows.length; //1行ずつループ
for(var i = 0; i < currentRowNum; i++){
    //行を取得
    var row = $(rows[i]);
    //行に1セル追加
    row.append('<td></td>');
}

列の削除

列の削除をするには、「1行ずつループ」を使ってループさせながら特定行だけを削除していきます。

セレクタを使う場合、列の構成が決まっていればよいのですがそうとも限りません。

列の追加・削除まで行うパターンでは、構成が動的に変化していてセレクタを使っても結局シンプルにことが済まない場合が多いです。

「列の追加」と同様にシンプルにループさせたほうが利便性が高いことが多いと思います。

//すべての行のデータを配列で取得
var rows = $("#drereum-table tbody").children();
//行数を取得
 var rowsNum= rows.length; //1行ずつループ
for(var i = 0; i < currentRowNum; i++){
    //行を取得
    var row = $(rows[i]);
    //セルの配列を取得
    var cells = $(row.children());
    //セルの削除（3列目を削除）
    cells[2].remove();
}