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

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

表示例

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

TBODY要素に新しいレコードを追加

$('table#tb-test tbody').append('12');

実行例

レコードを追加

'); });

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

TBODY要素にあるコンテンツを削除

$('table#tb-test tbody *').remove();

実行例

レコードを削除

変更したい場合も簡単で、任意のセルの内容を変更するには次のようにアクセスできます。
次の例では、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レコード全てにアクセスしたい場合は次のようeachメソッドが使えます。
次の例では、TD要素に0からの数値をインクリメントして代入しています。

var i	= 0;
$('table#tb-test tbody td').each(function(){
	$(this).text(i);
	i++;
});

実行例

レコードを変更