jQueryでテーブルをappendで動的に追加していく

Ajaxとかで動的にテーブルを操作したい

ちょっと迷ったのでメモ。jQueryで動的に追加してみる。

参考書

jQueryクックブック のレシピ1.10あたり。

コード

$("table").append(
    $("<tr></tr>")
        .append($("<td></td>").text("テキスト"))
        .append($("<td></td>").text("テキスト"))
);

1行目はタイトルという場合

thタグが先頭行に入っている時には、"tr:gt(0)"を使うと便利。

// 削除
$("table tr:gt(0)").remove();

// 数える
$("table tr:gt(0)").size();

サンプル

増やす・消す用にとりあえずHTMLタグを用意

<input type="button" id="articletablepush" value="ふやす">
<input type="button" id="articletabledelete" value="けす">

<table id="articletable" class="tablelines">

</table>

jsは以下のようにする

<script type="text/javascript">
(function($) {
    $("#articletablepush").click(function() {
        $("#articletable").append(
            $("<tr></tr>")
                .append($("<th></th>").text("ふえた"))
                .append($("<td></td>").text("ふえた"))
        );
    });

    $("#articletabledelete").click(function() {
        $("#articletable tr").remove();
    });
})(jQuery);
</script>

2013/02/07 18:12