jQueryでDOM操作 - おかひろの雑記

DOM操作というと大げさかもしれません。
JavaScript側でHTMLのTableやULを動的に組み立てる方法のメモです。
やり方はいろいろあると思いますが、私が今やっている方法を載せておきます。

サンプル

HTMLを開くとこんな感じのTABLEのヘッダーのみがあって

No	Name

ボタンを押すとJavaScriptでデータを表示するようにしてみます。

No	Name
1	山田
2	田中
3	鈴木
4	川口

すごい単純です。

表示するデータはこんな感じで用意しておきます。

var array = [{"no" : 1 , "name" : "山田"},
		{"no" : 2 , "name" : "田中"},
		{"no" : 3 , "name" : "鈴木"},
		{"no" : 4 , "name" : "川口"}];

Tableはこのようにしておきます。

<table border="1">
	<thead>
		<tr>
			<th>
				No
			</th>
			<th>
				Name
			</th>
		</tr>
	</thead>
	<tbody id="tableData">
		
	</tbody>
</table>

tbodyにidをつけていて、この中にtrとかtdを組み立てていきます。

余談ですが、Bootstrapとかでレイアウトを設定する場合、
tableタグの中にtheadとtbodyが必要なので、これらは入れておく癖をつけておいたほうがいいのではないかと思っています。

要素の組み立て

JavaScriptで、trとtdを作成してtbody配下に入れます。
この例は、良くないパターンだと思います。（結構最近までこのやり方でやっていました・・・・）

// ダメバージョン
function addRowToBottomDame()
{
	var html = '';
	
	for(i = 0; i < array.length; i++)
	{
		var data = array[i];
		html = html + '<tr><td>' + data.no + '</td><td>' + data.name + '</td></tr>';
	}
	
	$('#tableData').html(html);
}

上の例は非常に簡単なのでいいですが、実際は各行にリンクをつけて、リンクをクリックした時にJavaScriptの関数が動くようにして、
スタイルも意識するとclass属性を指定したりspanタグを追加したり・・・・と、どんどん複雑になってしまい、
可読性が半端無く下がります。

jQueryで必要なタグを1つずつメソッドチェーンを使って定義していくと、すっきり記述できます。

// 良いバージョン
function addRowToBottom()
{
	$('#tableData tr').remove();
	
	for(i = 0; i < array.length; i++)
	{
		var data = array[i];
		var tr = $('<tr/>');
		$('<td/>').text(data.no).appendTo(tr);
		$('<td/>').text(data.name).appendTo(tr);
		$('#tableData').append(tr);
	}
}

要素の追加はappend()、appendTo()を使っています。売れの例では使っていませんが、prepend()も使う時があります。

tr.append(td); // trの末尾にtdを追加
td.appendTo(tr); // tdをtrの末尾に追加
tr.prepend(td); // trの先頭にtdを追加
$('<td/>').addClass('hoge').text('データ').appendTo(tr); // tdタグを生成して、class="hoge"として、「データ」と表示するようにしてtrに追加

最初はとっつきづらい感じがするかもしれませんが、仕様変更でタグを追加したり削除したりする場合など、わかりやすく記述することができます。
（最初のダメな例でタグの追加とか削除とかしはじめると、だんだん嫌になってきます・・・）

少し古いですが、この本を参考にしました。