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(); });
    
カテゴリー: Tips タグ: , パーマリンク