如何使用列表数据并将其显示在5个不同的表中

Question

嗨我得到json类型的数据，我必须使用一个ajax函数创建5个不同的表，直到现在我知道如何使用和显示单个json数据和显示表

    [
    {
        "summary": [
            {
                "Name": "Ki",
                "Count": 5,
                "Per": ""
            },
            {
                "Name": "WithIn",
                "Count": 9,
                "Per": "6%"
            },
            {
                "Name": "Exceeds",
                "Count": 25,
                "Per": "3%"
            },
            {
                "Name": "Orders",
                "Count": 4,
                "Per": ""
            }
        ]
    },
    {
        "summary": [
            {
                "Name": "Time",
                "Count": 4,
                "Per": ""
            },
            {
                "Name": "WithIn",
                "Count": 15,
                "Per": "4%"
            },
            {
                "Name": "Exceeds",
                "Count": 9,
                "Per": "5%"
            },
            {
                "Name": "Orders",
                "Count": 34,
                "Per": ""
            }
        ]
    },
    {
        "summary": [
            {
                "Name": "Driving",
                "Count": 7,
                "Per": ""
            },
            {
                "Name": "Min",
                "Count": 5,
                "Per": "4%"
            },
            {
                "Name": "Exceeds",
                "Count": 2,
                "Per": "5%"
            },
            {
                "Name": "Orders",
                "Count":4,
                "Per": ""
            }
        ]
    },
    {
        "summary": [
            {
                "Name": "Driving",
                "Count": 17,
                "Per": ""
            },
            {
                "Name": "WithIn",
                "Count": 5,
                "Per": "1%"
            },
            {
                "Name": "Min",
                "Count": 2,
                "Per": "5%"
            },
            {
                "Name": "Orders",
                "Count": 4,
                "Per": ""
            }
        ]
    },
    }
]

现在我想在下面的4个差异表中显示数据，可以在此代码中实现

   var tr;
    var amnt = 0;

    for (var i = 0; i < Location.length; i++) {

        tr = tr + "<tr>";

        tr = tr + "<td style='height:20px' align='right'>" + Location[i].xxxx + "</td>";
        tr = tr + "<td style='height:20px' align='right'>" + Location[i].xxxxx.toFixed(2) + "</td>";
        tr = tr + "<td style='height:20px'align='left'>" + Location[i].xxxxxx + "</td>";
        tr = tr + "<td style='height:20px' align='left'>" + Location[i].xxxxxx + "</td>";

        tr = tr + "</tr>";



    };
    document.getElementById('d').style.display = "block";
    document.getElementById('Wise').innerHTML = "<table>" + "<thead class='cf'><tr><th style='height:20px'>dataname</th>" + "<th style='height:20px'>Quantity</th>" + "<th style='height:20px'>info</th>"  + "</tr></thead>"
        + tr + "<tr><td style='height:20px'></td><td style='height:20px'></td></tr>" +

        "</table>";
    document.getElementById('Wise').childNodes[0].nodeValue = null;


},

在这里，我可以将数据添加到单个表中，但无法将其添加到多个表中

Answer 1

当您使用jquery标记问题时，您可以使用更好的代码创建表格。使用map将td收集到tr，并将tr收集到table，最后将table个元素收集到目标容器中{{} 1}}。

我还建议使用CSS类，而不是使用#Wise属性。

＆＃13;

＆＃13;

style

＆＃13;

function createTables(loc) {
    var $table = $('<table>').append(
            $('<thead>').addClass('cf').append(
                $('<tr>').append(
                    $('<th>').addClass('loc').text('Data Name'),
                    $('<th>').addClass('loc').text('Quantity'),
                    $('<th>').addClass('loc').text('Info')
                )
            )
        );
    $('#Wise').html("").append(
        loc.map(function (section) {
            return $table.clone().append(
                section.summary.map(function (entry) {
                    return $('<tr>').append(
                        $('<td>').addClass('loc').text(entry.Name),
                        $('<td>').addClass('loc right').text(entry.Count.toFixed(2)),
                        $('<td>').addClass('loc').text(entry.Per)
                    );
                })
            );
        })
    );
    $('#d').show();
}

var loc = [{
    "summary": [{
        "Name": "Ki",
        "Count": 5,
        "Per": ""
    }, {
        "Name": "WithIn",
        "Count": 9,
        "Per": "6%"
    }, {
        "Name": "Exceeds",
        "Count": 25,
        "Per": "3%"
    }, {
        "Name": "Orders",
        "Count": 4,
        "Per": ""
    }]
}, {
    "summary": [{
        "Name": "Time",
        "Count": 4,
        "Per": ""
    }, {
        "Name": "WithIn",
        "Count": 15,
        "Per": "4%"
    }, {
        "Name": "Exceeds",
        "Count": 9,
        "Per": "5%"
    }, {
        "Name": "Orders",
        "Count": 34,
        "Per": ""
    }]
}, {
    "summary": [{
        "Name": "Driving",
        "Count": 7,
        "Per": ""
    }, {
        "Name": "Min",
        "Count": 5,
        "Per": "4%"
    }, {
        "Name": "Exceeds",
        "Count": 2,
        "Per": "5%"
    }, {
        "Name": "Orders",
        "Count":4,
        "Per": ""
    }]
}, {
    "summary": [{
        "Name": "Driving",
        "Count": 17,
        "Per": ""
    }, {
        "Name": "WithIn",
        "Count": 5,
        "Per": "1%"
    }, {
        "Name": "Min",
        "Count": 2,
        "Per": "5%"
    }, {
        "Name": "Orders",
        "Count": 4,
        "Per": ""
    }]
}];

createTables(loc);

＆＃13;

table { margin: 15px; border-collapse: collapse; }
td, th { border: 1px solid; padding: 0 5px 0 5px }
.loc  { height: 20px }
.right { text-align: right }

＆＃13;

＆＃13;

＆＃13;