JavaScriptテックラボ

jQueryでTABLE要素の操作

2011年11月17日

jQueryを使ってTABLE要素のレコードを追加したり変更したり、削除したりする方法をご紹介します。

<table id="tb-test">
<thead>
<tr>
<th>タイトル1</th>
<th>タイトル2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
表示例
タイトル1 タイトル2

上記のようなテーブルであれば、appendメソッドで簡単にレコードを追加できます。

TBODY要素に新しいレコードを追加
$('table#tb-test tbody').append('12');
実行例
タイトル1 タイトル2

削除する場合はremoveメソッドが使えます。

TBODY要素にあるコンテンツを削除
$('table#tb-test tbody *').remove();
実行例
タイトル1 タイトル2
1 2
1 2

変更したい場合も簡単で、任意のセルの内容を変更するには次のようにアクセスできます。
次の例では、TH要素の内容を"change"という文字列に変更しています。

$('table#tb-test thead th').text("change");

ただし、この方法だとTH要素全てが変更されてしまいます。
一部だけ変更したい場合はnth-childメソッドを使います。次の例では、TH要素の1番目のセルのテキストを変更しています。

$('table#tb-test thead tr th:nth-child(1)').text("change");
実行例
タイトル1 タイトル2
1 2
3 4

1レコード全てにアクセスしたい場合は次のようeachメソッドが使えます。
次の例では、TD要素に0からの数値をインクリメントして代入しています。

var i	= 0;
$('table#tb-test tbody td').each(function(){
$(this).text(i);
i++;
});
実行例
タイトル1 タイトル2
100 100
100 100

Comment

  1. なんででしょう?全く動かないんですが。
    firefoxとChrome使ったんですけどね。。

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。