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);
});

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

我做错了什么?

演示

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