我有一些HTML,JSON和Javascript。我想呈现一个由3行组成的表(从JSON开始)。问题是我所有的数据一次都在TD里出来

<table>
<tbody>
    <tr>
        <td>car</td>
        <td>1000</td>
        <td>2000</td>
        <td>1500</td>
        <td>1000</td>
        <td>house</td>
        <td>500</td>
        <td>600</td>
        <td>700</td>
        <td>800</td>
        <td>internet</td>
        <td>100</td>
        <td>200</td>
        <td>2350</td>
        <td>1940</td>
    </tr>
</tbody>
</table>


我想要

<table>
<tbody>
    <tr>
        <td>car</td>
        <td>1000</td>
        <td>2000</td>
        <td>1500</td>
        <td>1000</td>
    </tr>
    <tr>
        <td>house</td>
        <td>500</td>
        <td>600</td>
        <td>700</td>
        <td>800</td>
    </tr>
    <tr>
        <td>internet</td>
        <td>100</td>
        <td>200</td>
        <td>2350</td>
        <td>1940</td>
    </tr>
</tbody></table>


这是我的代码
的HTML

<div class="calc"></div>


JSON格式

{
"item": [
    {
        "name": "car",
        "cost": [1000, 2000, 1500, 1000]
    },
    {
        "name": "house",
        "cost": [500, 600, 700, 800]
    },
    {
        "name": "internet",
        "cost": [100, 200, 2350, 1940]
    }
]
}


Java脚本

$.getJSON("calc.json", function(data) {

    var $table = $('<table/>'),
        $row = $('<tr/>');

    for(var i = 0; i < data.item.length; i ++){
        $row.append( '<td>' + data.item[i].name + '</td>' );

        for (var cost = 0; cost < data.item[i].cost.length; cost ++) {
            $row.append( '<td>' + data.item[i].cost[cost] + '</td>' );
        }
    }

    $('.calc').append($table.append($row));

});


编辑较少代码密集的版本

$.getJSON("calc.json", function(data) {

    var $table = $("<table/>");

    $.each(data.item, function(k,v) {
        var $row = $("<tr/>");
        $row.append("<td>" + v.name + "</td>");

        $.each(v.cost, function(k,v) {
            $row.append("<td>" + v + "</td>");
        });

        $table.append($row);

    });

    $(".calc").append($table);

});

最佳答案

嗨,我已经改变了您的功能,但现在您可以使用以下给定的功能:

$.getJSON("calc.json", function(data) {

        var $table = $('<table/>');


        for(var i = 0; i < data.item.length; i ++){
           var $row = $('<tr/>');
            $row.append( '<td>' + data.item[i].name + '</td>' );

            for (var cost = 0; cost < data.item[i].cost.length; cost ++) {
                $row.append( '<td>' + data.item[i].cost[cost] + '</td>' );
            }
           $table.append($row);
        }

        $('.calc').append($table );

    });

关于javascript - 将Javascript数据放入表格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24861229/

10-11 22:26
查看更多