如何使用 jQuery JSON 创建表？

Question

有人可以帮我弄清楚如何在每次循环开始时添加 tr 行。下面是我的 jQuery 代码：

var row = $("<tr></tr>");

     $.each(data.response.docs, function (i,  item) { // json is the name of the object

        row.append('<td>' + item.adServerId + '</td>'); //item is named at the opening of this $.each function
        row.append('<td>' + item.advertiserId + '</td>');
        row.append('<td>' + item.advertiserName + '</td>');
        row.append('<td>' + item.campaignId + '</td>');
        row.append('<td>' + item.campaignName + '</td>');
        row.append('<td>' + item.bookedImps + '</td>');
        row.append('<td>' + item.imps + '</td>');
        row.append('<td>' + item.clicks + '</td>');
        row.append('<td>' + item.ctr + '</td>');
        row.append('<td>' + item.postViewConvs + '</td>');
        row.append('<td>' + item.postViewConvsRate + '</td>');
        row.append('<td>' + item.convs + '</td>');
        row.append('<td>' + item.convsRate + '</td>');
        row.append('<td>' + item.targetRevenue + '</td>');
        row.append('<td>' + item.revenue + '</td>');
        row.append('<td>' + item.cost + '</td>');
        row.append('<td>' + item.startDate + '</td>');
        row.append('<td>' + item.endDate + '</td>,</tr>');
        $("#adcampaignGrid").append(row);

Answer 1

在循环内移动var row = $('<tr></tr>')？

 $.each(data.response.docs, function (i,  item) { // json is the name of the object

     var row = $("<tr></tr>");
     // rest of your code
 }

另外，正如@minitech 所说，使用text() 包装item.xxx 以避免将有趣的内容注入您的页面。

对于标题，我建议将标题直接放在 html 上：

http://jsfiddle.net/QtnS4/1/

<table id="aa">
    <thead>
        <tr><th>Col 1</th><th>Col 2</th></tr>       
    </thead>
    <tbody>
    </tbody>

</table>​

JS：

var records = [
    {key: "Value 1", key2: "Value 1b"},
    {key: "Value 2", key2: "Value 2b"}
];

for(var i = 0; i < records.length; i++) {
    var row = $('<tr></tr>');
    row.append($('<td></td>').text(records[i].key));
    row.append($('<td></td>').text(records[i].key2));
    $('#aa').append(row);
}

Answer 2

$.each(data.response.docs, function (i, item) {
  var row = $("<tr></tr>");
  for (var i in item) row.append($('<td>').text(item[i]));
  $("#adcampaignGrid").append(row);
});

或者如果所有键都不需要：

$.each(data.response.docs, function (i, item) {
  var props = [
    'adServerId', 
    'advertiserId', 
    'advertiserName', 
    'campaignId', 
    'campaignName', 
    'bookedImps', 
    'imps', 
    'clicks', 
    'ctr', 
    'postViewConvs', 
    'postViewConvsRate', 
    'convs', 
    'convsRate', 
    'targetRevenue', 
    'revenue', 
    'cost', 
    'startDate', 
    'endDate'
  ];

  var row = $("<tr></tr>");
  for (var i in props) row.append($('<td>').text(item[props[i]]));
  $("#adcampaignGrid").append(row);
});