}

Question

我有一个使用HTML和CSS设置的表格，表格包含＆＃34;行XX＆＃34;和＃34; YY行＆＃34;。这些细胞旁边是＆＃34; XX＆＃34;和＆＃34; YY＆＃34;在div中，给定ID，因此它是

我还有一个JSON格式的数据文件，看起来像这样（有数百个数据，但我每次只记下两次迭代）。

[
  {
    "XX":24,
    "YY":12,
  },
  {
    "XX":15,
    "YY":16,
  },
]

我的目标是编写一个JavaScript文件，希望在一个数组中导出，将JSON文件中的数据循环到表格中的div ID中，这样 JSON＆＃34; xx＆＃34;进入div ID =＆＃34; XX＆＃34;在桌子里面 JSON＆＃34; yy＆＃34;进入div ID =＆＃34; YY＆＃34;在桌子里面

有数百个数据，所以我在想一个for循环？既然这些数据必须存储，我认为它必须在数组中？

表的JS小提琴是here

请注意：在循环访问JSON数据时，我不想添加额外的列或行。我希望表格单元格中的唯一ID能够在数据循环时刷新并更新到新数据

Answer 1

你可以测试：

数据是你的json

var $item =  [];
var $items = $(null);  // Your future html result
$.each(data, function(i, item) {
   $item[i] = $($($.parseHTML('<div id="'+i+'">'+item+'</div>')));
   $items = $items.add($item[i]);
});

Answer 2

您可以使用jQuery来执行此操作。假设您的所有数据都进入xx和yy这两行，只需设置一个包含行xx和yy的表。表格单元格中不需要div。然后，您可以使用jQuery在适当的行中插入每个数据点的td。这是一个例子：

    <table>
        <tr  id="xx">
        </tr>
        <tr  id="yy">               
        </tr>
    </table>

然后做这样的事情（我已经创建了一个示例数据并将其称为a）：

var a = [ {"xx": 24, "yy": 12}, {"xx": 15, "yy": 16}];

for (i=0; i < a.length; i++) {
    $('#xx').append("<td>"+a[i].xx+"</td>");
    $('#yy').append("<td>"+a[i].yy+"</td>");

}

要替换现有表格单元格中的值，请使用以下表格进行替换：

    <table>
        <tr >
            <td>Row xx</td>
            <td id="xx"></td>               
        </tr>
        <tr>
            <td>Row yy</td>
            <td id="yy"></td>
        </tr>
    </table>

然后，只需将for循环更改为：

for (i=0; i < a.length; i++) {
    $('#xx').html(a[i].xx);
    $('#yy').html(a[i].yy);
}

Answer 3

使用两个for循环。第一个for循环是遍历xx。第二个是你。

var data = [
    {"xx":2, "yy":3},{"xx":5, "yy":2}
];


for(var i=0;i<data.length;i++) {
    $('table tr:eq(0)').append('<td>' + data[i]['xx'] + '</td>');
}

for(var i=0;i<data.length;i++) {
    $('table tr:eq(1)').append('<td>' + data[i]['yy'] + '</td>');
}

检查fiddle。继续向data数组添加新数据。

JavaScript：JSON数据进入表格单元格

3 个答案:

}