jquery从json文件中提取键并设置为html表头

Question

$.getJSON(url , function(data) {
    var tbl_body = "";
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v){
            tbl_row += "<td>"+v+"</td>";
            console.log( k +' : '+ v );
            HeadKeys = '<tr><td><b>'+k+'</b></td></tr>';
        })
        tbl_body += "<tr>"+tbl_row+"</tr>";                 
    });
    $("#myTable tbody").html(HeadKeys + tbl_body);
});

我正在尝试使用此代码，但它只输出一个键到表行..

我做错了什么？

DEMO

Answer 1

您必须确保表标题只检查一次; 此外，确保HTML被正确转义而不是使用字符串构建（尽管在某些情况下可能更快），这是很好的。

$.getJSON(url , function(data) {
    var $head = null,
        $body = $('<tbody>');

    $.each(data, function(index, obj) {
        if ($head === null) {
            // generate the first row if necessary
            $head = $('<tr>').append($.map(obj, function(value, name) {
                return $('<th>', { text: name });
            }));
        }
        // generate each row
        $('<tr>').append($.map(obj, function(value, name) {
            return $('<td>', { text: value });
        })).
            appendTo($body);
    });

    // append all the things    
    $("#myTable").append($head).append($body);
});

请注意，依赖于对象属性的特定顺序不一定是可移植的; 语言规范不能确保应遵守特定的顺序。 因此，更稳定的解决方案是自己控制订单。

Answer 2

尝试这个

$.getJSON(url , function(data) {
    var tbl_body = "";
    $.each(data, function() {
        var tbl_row = "";
        HeadKeys = '<tr></tr>';
        $.each(this, function(k , v){        
            tbl_row += "<td>"+v+"</td>";
            console.log( k +' : '+ v );
            HeadKeys += '<td><b>'+k+'</b></td>';
        })
       tbl_body += "<tr>"+tbl_row+"</tr>";                 
   });
   $("#myTable tbody").html(HeadKeys + tbl_body);
});

修正了jsfiddle