Question

我有一个JSON响应，如下所示：

[
    [
        "hospital_name",
        "Average Covered Charges",
        "Average Total Payments",
        "Total Discharges"
    ],
    [
        "MERCY REGIONAL HEALTH CENTER",
        6888.8181818182,
        2890.5454545454,
        11
    ],
    [
        "BUTLER MEMORIAL HOSPITAL",
        13699.818181818,
        2934.5454545454,
        11
    ],
    [
        "METHODIST MANSFIELD MEDICAL CENTER",
        23913.909090909,
        2964.8181818182,
        11
    ],
    [
        "EMORY JOHNS CREEK HOSPITAL",
        10976.727272727,
        2993.5454545454,
        11
    ]
]

我试图做这样的事情：

     success:(function(data) {
                            jQuery.each(data, function(key, value) {
                                jQuery('table[name=drg_table]')
                                .append(
                                jQuery('<td>').text(key[0]),
                                jQuery('<td>').text(key[1]),
                                jQuery('<td>').text(key[2])
                            ); 
                            });
                        }

但我不确定这是更新我的表（已经存在）的正确方法。我只想用新值更新整个表。

Answer 1

您已经拥有一个ID为#records_table的表格，所以

尝试，

jQuery('#records_table tr').remove(); //To clear the rows (pointed by @nunners)

jQuery.each(data, function(key, value) {
 jQuery('#records_table')
 .append('<tr><td>' + value[0] 
  + '</td><td>' + value[1] 
  + '</td><td>' + value[2] 
  + '</td><td>' + value[3] 
  + '</td></tr>');
});

我认为您已使用新选择器更新了您的问题，因此请将选择器更改为

上面代码中的

jQuery('table[name=drg_table]')。

DEMO

Answer 2

首先 - 您不能将<td>元素作为<table>的子元素 - 您可能希望附加到<tbody>并将<td>包裹在<tr>中}}

第二 - value参数保持数组不是key - key实际上是索引

您可以像这样创建字符串，然后在创建完整的元素字符串后添加到您的html

var str = '';
jQuery.each(data, function (key, value) {
    str += '<tr><td>' + value[0] + '</td>'
        + '<td>' + value[1] + '</td>'
        + '<td>' + value[2] + '</td>'
        + '<td>' + value[3] + '</td></tr>';
});
jQuery('table[name=drg_table] tbody').html(str);

FIDDLE

Answer 3

我刚刚听说一个专门的插件将JSON显示为名为“dynatable”的漂亮表：http://dailyjs.com/2013/12/17/frontend-roundup/

你可能想看看。

从JSON响应创建表

3 个答案:

DEMO