テーブルを使う際は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(); });