jquery - 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