Jsonデータを10行2列に並べて表示したいです

投稿者: Anonymous

下記ソースの通り、JsonのNameデータが最大20件(最大20件で最小1件が)送られてきます。
そのデータを画面出力する際、10行2列に並べて表示したいのですが、
実装方法が分かりません。ご教授をお願いします。

・java script Jsonデータ取得時

  $.get(url, function (jsonData) {
    });

・現在のHTMLです

      <table id="example">
            <thead>
                <tr>
                    <th>Name1列目</th>
                    <th>Name2列目</th>
                </tr>
            </thead>
            <tbody>
        </table>

解決

2つずつ処理していけば良いです。

_x000D_

_x000D_

$(document).ready(function(){_x000D_
    _x000D_
    var jsonData = [{"name": "一郎"},{"name": "二郎"},{"name": "三郎"}];_x000D_
    _x000D_
    for(var idx = 0; idx <= jsonData.length/2; idx++){_x000D_
    _x000D_
        var tr = $('<tr>');_x000D_
        _x000D_
        var name = jsonData[idx*2].name;_x000D_
        tr.append('<td>' + name + '</td>');_x000D_
        name = (idx*2+1 == jsonData.length) ? "" : jsonData[idx*2+1].name;_x000D_
        tr.append('<td>' + name + '</td>');_x000D_
_x000D_
        $('#example').find('tbody').append(tr);_x000D_
    }_x000D_
    _x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>_x000D_
_x000D_
<table id="example">_x000D_
    <thead>_x000D_
        <tr>_x000D_
            <th>Name1列目</th>_x000D_
            <th>Name2列目</th>_x000D_
        </tr>_x000D_
    </thead>_x000D_
    <tbody>_x000D_
    </tbody>_x000D_
</table>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *