jQuery/JavaScriptで動的tableを操作する技

テーブルを使う際はjQueryのプラグインを使うことが多いが、jQuery/JavaScriptで素のHTMLテーブルを操作する場合のいろいろな技。

• jQueryでgetElementById()と同等のオブジェクトを取得

// JavaScript
var tbl = document.getElementById("Table1");
var tbl = $('#Table1')[0]; // 同じ意味

• テーブルの行・列の内容を取得

// JavaScript
//var tbl = $('#tblClipList')[0]; // テーブルオブジェクトの取得
//var rows = tbl.rows; // 行オブジェクトの取得
var rows = $('#tblClipList')[0].rows; // 行オブジェクトの取得
console.log(rows.length);
// 各行をループ処理
$.each(rows, function(i){
   var cells = rows[i].cells;
   // 一番左の列の内容を表示
   console.log('i:' + i + ' cell0:' + $(cells[0]).text());
});

cells[0]はDOMオブジェクトなのでjQueryのメソッドであるtext()を適用するために、$(cells[0])としてjQueryのオブジェクトに変換している。forループを使う場合は以下のとおり。

// JavaScript
var cells;
for (var i=0; i < rows.length; i++){
    cells = rows[i].cells;
    console.log(cells.length); // 列数を出力
    for (var j=0; j < cells.length; j++){
    //console.log('i:' + ' j:' + $(cells[j]).text());
    console.log('i:' + ' j:' + $(rows[i].cells[j]).text());
    }
}

eachのときと同様、cells[j]やrows[i].cells[j]に＄()を適用してjQueryオブジェクトに変換している。なおthタグで作成した行もカウントされている
点に注意する。まだ試していないが以下のようにすれば区別できるようだ。

if( cells.eq(j).is("th") ) // th
if( cells.eq(j).is("td") ) // td

• どのボタンが押されたかを識別する

テーブルの各行にボタンを作成した場合に必要。まずボタンを作成するタイミングで、異なるidを付与しておく。また、ボタンは同じクラス(btnInfo)にする。

// JavaScript
function getNewRow(idx){
   var btnInfo = '<button type="button" class="btnInfo" id="' + idx + '" ></button>';
   // ...
}

クラス共通のイベントハンドラを用意し、attr()でボタンに付けられたidを取得する。

// JavaScript
$('.btnInfo').live('click',function(){
   var cur_idx = $(this).attr('id');
}

• 何行目のボタンかを識別する

押されたボタンが何番目(何行目)のtr要素に含まれているかを調べればよい。

// JavaScript
var row = $(this).parent().parent(); // ボタンが2階層下にあるとわかっている場合
var row = $(this).closest('td').parent(); // 構造が不明・一定でない場合

2つは同じjQueryオブジェクトが得られる(はず)。table – tr – td – button…としてボタンを作成した場合は前者でOK。
何番目の行かはJavaScriptrowIndex,sectionRowIndexで得られる(メソッドでないので()は不要！)が、これはDOMインターフェースで提供されているので、[0]をつけてDOMに変換する。

console.log(row[0].rowIndex); // 行番号を出力
$(this).closest('td').parent()[0].sectionRowIndex // 1行で記述

• ボタンが押された行のすぐ下に行を追加する

jQueryでは要素の追加に関し、以下のメソッドが用意されている。
- append(c) : コンテンツcをカレント要素の子要素末尾に追加
- prepend(c) : コンテンツcをカレント要素の子要素先頭に追加
- after(c) : コンテンツcをカレント要素の後方に追加
- before(c) : コンテンツcをカレント要素の前方に追加
after()を使った例は以下。(getNewRow(gIndex)は独自に用意した関数で、追加するtr要素を返すもの。)

// JavaScript
$('.btnAdd').live('click', function(){
   btnAdd(this);
});
function btnAdd(btn){
   var $cur_tr = $(btn).closest('td').parent(); // ボタンのあるtd要素の親からtr要素を取得
   $cur_tr.after(getNewRow(gIndex));
}

($objA).after($objB)でAの後ろにBを追加する。

• 追加の際にアニメーション効果を付与する

要素の追加には、上記以外に以下のパターンが提供されている。
- insertAfter(c) : カレント要素をコンテンツcの後方に追加
- insertBefore(c) : カレント要素をコンテンツcの前方に追加
先のパターンとは逆で、($objA).insertAfter($objB)はBの後ろにAを追加する。これを使って以下のようにする。

// JavaScript
var $cur_tr = $(btn).closest('td').parent(); // ボタンのあるtd要素の親からtr要素を取得
var newRow = getNewRow(gIndex);
$(newRow).insertAfter($cur_tr).hide().fadeIn(2000);
// 追加した行をいったん見えなくし、2秒後にフェードインさせる。

• ボタンが押された行をアニメーションつきで削除する

jQueryでtr要素を削除するにはremove()を使う。また、アニメーションにはhide()を使うが、$target.hide().remove()とすると、hide()が完了する前にremove()が実行されてしまうので、コールバック関数を使って以下のように記述する。

var $cur_tr = $(btn).closest('td').parent(); // ボタンのあるtd要素の親からtr要素を取得
$cur_tr.hide('5000', function(){ $cur_tr.remove(); });