jQueryでhtml5のdata属性から表（table）を作成する

最終的なイメージ

たとえばこんな感じで表を作りたいとします。

	<table>
		<tr>
			<th>星1つ</th>
			<td>2</td>
		</tr>
		<tr>
			<th>星2つ</th>
			<td>4</td>
		</tr>
		<tr>
			<th>星3つ</th>
			<td>5</td>
		</tr>
	</table>
    

html & js

名前と値が対になるような表なので次のようにdata属性を設定します。

html

	<div class="star" data-star='{"星1つ":2,"星2つ":4,"星3つ":5}'></div>
    

jQueryのコードはdata属性を読み込んだら、数だけappendさせれば完成です。

javascript

	(function($) {
		$(function() {
			$('.star').each(function(){
				var that = $(this);
				var starData = that.data('star');
				if (starData) {
					that.append('<table></table>');
					$.map(starData, function(value, key) {
						that.find('table').append('<tr><th>'+key+'</th><td>'+value+'</td></tr>');
					});
				}
			});
		});
	})(jQuery);
    

値の数だけ画像を生成する

これだけだとわざわざjs使うまでもないですが、例えば次のように「難易度：～」みたいに星画像を並べたいときは、そのままimgを配置してマークアップするとわかり難いですね。

	<table>
		<tr>
			<th>難易度</th>
			<td>
				<img src="img/star.png">
				<img src="img/star.png">
			</td>
		</tr>
		<tr>
			<th>ほげ度</th>
			<td>
				<img src="img/star.png">
				<img src="img/star.png">
				<img src="img/star.png">
				<img src="img/star.png">
			</td>
		</tr>
		...
	</table>
	

そんなときは次のようにdata属性を設定して、

html

	<div class="star" data-star='{"難易度":2,"ほげ度":4,"ふが度":5}'></div>
	

data属性で設定した値は数値で扱えますので、そのままループで回せば数の分だけ画像を追加できます。

javascript

	$('.star').each(function(){
		var that = $(this);
		var starData = that.data('star');
		if (starData) {
			that.append('<table></table>');
			$.map(starData, function(value, key) {
				var out = '<tr><th>'+key+'</th><td>';
				for (var i=0; i < value; i++) {
					out += '<img src="img/star.png">';
				}
				out += '</td></tr>';
				that.find('table').append(out);
			});
		}
	});
	

かなり局地的にしか使えない小回り系コードでしたが以上です。
data属性はその場でjsのオプション的に設定できたりするので、他にもいろいろとできそうですね。