javascript - 从 JSON 数据动态生成 HTML 表格

Question

我正在尝试根据来自数据库的 JSON 文件动态创建 HTML 表:

http://jsfiddle.net/xAt3Z/1/

var details = {
    "BookingsByHour" : [
        {
            "Date": "2014-06-5T00: 00: 00.000Z",
            "Breakdown": [
                {
                    "Hour": "00",
                    "BookingCount": 560,
                    "LastYearDifference": 42
                },{
                    "Hour": "01",
                    "BookingCount": 524,
                    "LastYearDifference": 34
                },{
                    "Hour": "02",
                    "BookingCount": 448,
                    "LastYearDifference": 92
                } // etc...
            ],
            "Total": 5340
        },{
            "Date": "2014-06-60T00: 00: 00.000Z",
            "Breakdown": [
                {
                    "Hour": "00",
                    "BookingCount": 506,
                    "LastYearDifference": 46
                },{
                    "Hour": "01",
                    "BookingCount": 432,
                    "LastYearDifference": 92
                },{
                    "Hour": "02",
                    "BookingCount": 498,
                    "LastYearDifference": 37
                }
            ],
            "Total": 14339
        },{
            "Date": "2014-07-60T00: 00: 00.000Z",
            "Breakdown": [
                {
                    "Hour": "00",
                    "BookingCount": 506,
                    "LastYearDifference": 46
                },{
                    "Hour": "01",
                    "BookingCount": 432,
                    "LastYearDifference": 92
                },{
                    "Hour": "02",
                    "BookingCount": 498,
                    "LastYearDifference": 37
                }
            ],
            "Total": 14339
        }, 
    ], 
};

第一行需要由“小时”组成(看到json数据就更清楚了)，基本上从00到23、24小时

从第二行开始，每个日期都是相同的，每个“小时”都会有一个对应的“BookingCount”。

这将根据 JSON 数据中有多少“日期”进行复制

到目前为止，我得到了这个，但我陷入困境，我找不到一种方法来添加与每个“日期”的每个“小时”相对应的“BookingCount”。

$(document).ready(function(){

    var hours = details.BookingsByHour[0].Breakdown.length-1;
        wrapper = $('.hours');

    for(i =0; i <= hours; i++ ){
        wrapper.append("<td>"+i+ "</td>");
    };

    for(i =0; i<=details.BookingsByHour.length-1; i++){

        $('.div').append("<tr><td>" + details.BookingsByHour[i].Date +"</td></tr>");
        console.log(details.BookingsByHour[i].Breakdown[i].BookingCount);
    }

}); 

Answer 1

首先添加所有 24 <td>到 table 上。然后，循环遍历小时并执行 parseInt()值以获得有效的整数。使用该整数来获取相应的 <td>并设置其值

for(i =0; i < 24; i++ ){
    $('.hours').append("<td>"+i+ "</td>");
};

for(i =0; i<=details.BookingsByHour.length-1; i++){
    var row = $('<tr></tr>');
    row.append("<td>" +  details.BookingsByHour[i].Date +"</td>");
    for(var j=0;j<24;j++) {
        row.append('<td></td>');   
    }        

    for(var k = 0;k<details.BookingsByHour[i].Breakdown.length;k++){
        var hour = parseInt(details.BookingsByHour[i].Breakdown[k].Hour, 10);
        $(row.find('td')[hour+1]).text(details.BookingsByHour[i].Breakdown[k].BookingCount);
    }

    $('.div').append(row);
}

看看这个working demo

上面的示例还处理 JSON 中缺失的小时数。如果您不介意这个，您可以直接添加该值:

for (i = 0; i <= details.BookingsByHour.length - 1; i++) {
    var row = $('<tr></tr>');
    row.append("<td>" + details.BookingsByHour[i].Date + "</td>");
    for (var j = 0; j < 24; j++) {
        var val = typeof details.BookingsByHour[i].Breakdown[j] != 'undefined' ? details.BookingsByHour[i].Breakdown[j].BookingCount : '&nbsp;';
        row.append('<td>' + val + '</td>');
    }

    $('.div').append(row);
}