我有一些 HTML、JSON 和 Javascript。我想渲染一个由 3 行组成的表(如 JSON)。问题是我的所有数据都在一次 tr 中以 TD 形式输出
<table>
<tbody>
<tr>
<td>car</td>
<td>1000</td>
<td>2000</td>
<td>1500</td>
<td>1000</td>
<td>house</td>
<td>500</td>
<td>600</td>
<td>700</td>
<td>800</td>
<td>internet</td>
<td>100</td>
<td>200</td>
<td>2350</td>
<td>1940</td>
</tr>
</tbody>
</table>
我要
<table>
<tbody>
<tr>
<td>car</td>
<td>1000</td>
<td>2000</td>
<td>1500</td>
<td>1000</td>
</tr>
<tr>
<td>house</td>
<td>500</td>
<td>600</td>
<td>700</td>
<td>800</td>
</tr>
<tr>
<td>internet</td>
<td>100</td>
<td>200</td>
<td>2350</td>
<td>1940</td>
</tr>
</tbody></table>
这是我的代码 HTML
<div class="calc"></div>
JSON
{
"item": [
{
"name": "car",
"cost": [1000, 2000, 1500, 1000]
},
{
"name": "house",
"cost": [500, 600, 700, 800]
},
{
"name": "internet",
"cost": [100, 200, 2350, 1940]
}
]
}
Javascript
$.getJSON("calc.json", function(data) {
var $table = $('<table/>'),
$row = $('<tr/>');
for(var i = 0; i < data.item.length; i ++){
$row.append( '<td>' + data.item[i].name + '</td>' );
for (var cost = 0; cost < data.item[i].cost.length; cost ++) {
$row.append( '<td>' + data.item[i].cost[cost] + '</td>' );
}
}
$('.calc').append($table.append($row));
});
编辑代码密集程度较低的版本
$.getJSON("calc.json", function(data) {
var $table = $("<table/>");
$.each(data.item, function(k,v) {
var $row = $("<tr/>");
$row.append("<td>" + v.name + "</td>");
$.each(v.cost, function(k,v) {
$row.append("<td>" + v + "</td>");
});
$table.append($row);
});
$(".calc").append($table);
});
最佳答案
您好,我对您的功能做了一些更改,但现在您可以使用以下给定的功能:-
$.getJSON("calc.json", function(data) {
var $table = $('<table/>');
for(var i = 0; i < data.item.length; i ++){
var $row = $('<tr/>');
$row.append( '<td>' + data.item[i].name + '</td>' );
for (var cost = 0; cost < data.item[i].cost.length; cost ++) {
$row.append( '<td>' + data.item[i].cost[cost] + '</td>' );
}
$table.append($row);
}
$('.calc').append($table );
});
关于Javascript 数据存入表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24861229/