jQueryでテーブルをappendで動的に追加していく
TOP > てきとうにこらむ > ゲーム作りとプログラミング日記 > 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>