jqueryでのテーブル値操作いろいろな方法まとめ - "Diary" インターネットさんへの恩返し

いつも忘れちゃうのでテーブルの値操作関連をまとめてみる。

[目次]

クリックされた行番号を取得
クリックされた行、列番号を取得
クリックされたセルの値を取得
テーブルの値を配列に挿入
テーブルの値を配列に取得(セル内にInput/selectなどがある場合）
行削除（クリックされた行を削除）
行追加（一番下に追加）

クリックされた行番号を取得

$("tr").click( function(){
  alert($("tr").index(this));
});

http://log.miraoto.com/2012/05/597/

クリックされた行、列番号を取得

$('td').click(function(){
    //縦
    var row = $(this).closest('tr').index();
    //横
    var col = this.cellIndex;
    console.log('Row: ' + row + ', Column: ' + col);
});

http://thr3a.hatenablog.com/entry/20140904/1409819152

クリックされたセルの値を取得

$(this).text();

http://thr3a.hatenablog.com/entry/20140904/1409819152

テーブルの値を配列に挿入

var data = [];
var tr = $("table tr");//テーブルの全行を取得
for( var i=0,l=tr.length;i<l;i++ ){
 var cells = tr.eq(i).children();//1行目から順番に列を取得(th、td)
 data[i] = [];
 for( var j=0,m=cells.length;j<m;j++ ){
  data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得
 }
}

http://jisakupc-technical.info/programing/jquery/2409/

テーブルの値を配列に取得(セル内にInput/selectなどがある場合）

    var data = [];
    var tr = $("#<id> tr");//テーブルの全行を取得
    for( var i=1,l=tr.length;i<l;i++ ){
        var cells = tr.eq(i).children();//1行目から順番に列を取得(th、td)
        data[i-1] = {};
        data[i-1].key1= cells.eq(0).find("input").val();
        data[i-1].key2 = cells.eq(1).find("[name='selectのname']").val();
        data[i-1].key3 = cells.eq(2).find("input").val();
        data[i-1].key4 = cells.eq(3).find("[name='selectのname']").val();
        data[i-1].key5 = cells.eq(4).find("input").val();
    }

行削除（クリックされた行を削除）

セルの右端などに、ゴミ箱ボタンを置くなどして、そのオブジェクトにonclick="delThisTR(this)"としておく。

function delThisTR(val){
    $(val).closest("tr").fadeOut(300, function() { $(this).remove(); });
}

行追加（一番下に追加）

    var temp = "";
    temp += "<tr>";
    temp += "<td>ごにょごにょ</td>";
    temp += "<td>ごにょごにょ</td>";
    temp += "<td>ごにょごにょ</td>";
    temp += "<td>ごにょごにょ</td>";
    temp += "</tr>";

    $("#<テーブルのid> tbody").append(temp);