7699


現在は下記のようにひとつひとつ行を作っています。

[code]

    <table id="sampleTable" class="tablesorter">
        <thead>
            <tr>
                <th>都道府県名</th>
                <th>読み</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>東京都</td>
                <td>とうきょうと</td>
            </tr>
            <tr>
                <td>大阪府</td>
                <td>おおさかふ</td>
            </tr>
        </tbody>
    </table>
    
[/code]

しかし、50行のテーブルとなるとソース量が多くなってしまうので、  
もっと簡単な記述方法があればご教授をお願いしたいです。  
因みに、javaScriptを使用しても大丈夫です。


CC BY-SA 3.0
2015-03-10T05:28:53.197
7696
2015-03-10T06:06:53.257
2015-03-10T05:34:09.983
7626
7626
question
javascript html css
2列 50行のテーブルを簡単に作成したいです


元のデータ形式がcsv等であればcsvからhtmlを作成するサービスがありますよ。  
<http://www.convertcsv.com/csv-to-html.htm>


CC BY-SA 3.0
2015-03-10T05:39:41.440
7698
2015-03-10T05:39:41.440
525
7696
answer


jQueryを利用した方法は以下になります。

[code]

    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
      $(function(){
        var data = [
          {name:'東京都', yomi:'とうきょうと'},
          {name:'大阪府', yomi:'おおさかふ'},
          {name:'北海道', yomi:'ほっかいどう'}
          // ...略（最後の要素にはカンマを付けないように）
        ];
    
        data.forEach(function(v){
          html = '<tr><td>'+v.name+'</td><td>'+v.yomi+'</td></tr>';
          $('#sampleTable tbody').append(html);
        });
      });
    </script>
    
    <table id="sampleTable" class="tablesorter">
      <thead>
        <tr>
          <th>都道府県名</th>
          <th>読み</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    
[/code]


CC BY-SA 3.0
2015-03-10T05:41:03.367
7699
2015-03-10T05:51:48.077
2015-03-10T05:51:48.077
8351
8351
7696
answer


MVCとかMVVMとかのフレームワークライブラリを使う手もあります。  
簡単な内容ならjQueryとかで書いてしまう方が楽ですが、HTMLが複雑になったときには便利です。

下記は[Knockout.js](http://kojs.sukobuto.com/docs/introduction)を使った例です。

[code]

    <table id="sampleTable" class="tablesorter">
        <thead>
            <tr>
                <th>都道府県名</th>
                <th>読み</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: data">
            <tr>
                <td data-bind="text: name"></td>
                <td data-bind="text: yomi"></td>
            </tr>
        </tbody>
    </table>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script>
    var viewmodel = {
        data: [
            { name:'東京都', yomi:'とうきょうと' },
            { name:'大阪府', yomi:'おおさかふ' }
        ]
    };
    ko.applyBindings(viewmodel);
    </script>
[/code]


CC BY-SA 3.0
2015-03-10T06:06:53.257
7704
2015-03-10T06:06:53.257
8078
7696
answer