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

そこそこの規模の表（table）を作るときは最近だとcsvとかからjQueryで作ったりできますが、ちょっとした表だと少々大げさな気がします。
ということでhtml5で追加されたdata属性からtableを作る方法をご紹介します。

投稿日2014/06/13

更新日2014/06/13

最終的なイメージ

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

1
<table>
2
  <tr>
3
    <th>星1つ</th>
4
    <td>2</td>
5
  </tr>
6
  <tr>
7
    <th>星2つ</th>
8
    <td>4</td>
9
  </tr>
10
  <tr>
11
    <th>星3つ</th>
12
    <td>5</td>
13
  </tr>
14
</table>

html & js

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

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

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

1
(function($) {
2
  $(function() {
3
    $('.star').each(function(){
4
      var that = $(this);
5
      var starData = that.data('star');
6
      if (starData) {
7
        that.append('<table></table>');
8
        $.map(starData, function(value, key) {
9
          that.find('table').append('<tr><th>'+key+'</th><td>'+value+'</td></tr>');
10
        });
11
      }
12
    });
13
  });
14
})(jQuery);

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

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

1
<table>
2
  <tr>
3
    <th>難易度</th>
4
    <td>
5
      <img src="img/star.png">
6
      <img src="img/star.png">
7
    </td>
8
  </tr>
9
  <tr>
10
    <th>ほげ度</th>
11
    <td>
12
      <img src="img/star.png">
13
      <img src="img/star.png">
14
      <img src="img/star.png">
15
      <img src="img/star.png">
16
    </td>
17
  </tr>
18
  ...
19
</table>

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

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

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

1
$('.star').each(function(){
2
  var that = $(this);
3
  var starData = that.data('star');
4
  if (starData) {
5
    that.append('<table></table>');
6
    $.map(starData, function(value, key) {
7
      var out = '<tr><th>'+key+'</th><td>';
8
      for (var i=0; i < value; i++) {
9
        out += '<img src="img/star.png">';
10
      }
11
      out += '</td></tr>';
12
      that.find('table').append(out);
13
    });
14
  }
15
});