jQuery 表組みテーブルで要素を選択する

すごいトリッキー。自分でも良くわからないがとりあえずメモ。
下記のようなテーブルがある場合にすべてのセルをひとつづつ処理するJS処理。jQuaryで各要素を選択するfor文とセレクターの使い方がポイント。

<table>
<tr class="record">
<td class="data"></td>
<td class="data"></td>
<td class="data"></td>
<td class="data"></td>
<tr>
<tr class="record">
<td class="data"></td>
<td class="data"></td>
<td class="data"></td>
<td class="data"></td>
<tr>

〜繰り返し〜
</table>

$(".record").size()を使ってtrの数を取得してforですべてのレコードにひとつづつ処理をする。

さらに、$(".record:eq(" + i +") .data").size()で:eq(" + i +")でレコードを指定しつつ、ひとつのレコードに何個のセル（.data）があるかを.size()で取得。forでさらにセルひとつづつ処理。

$(".record:eq(" + i +") .data:eq(" + j +")").after("〜".text());
で個別のセルにいっこづつ処理を入れる。

$("btn").click(function () {
	for (i = 0; i < $(".record").size(); i = i +1){
		for (j = 0; j < $(".record:eq(" + i +") .data").size(); j = j +1){
			$(".record:eq(" + i +") .data:eq(" + j +")").after("<br />" + $(".record:eq(" + i +") .data:eq(" + j +")").text());
		}
	}
});