我的JSON看起来像这样: -
{
"tblDetails": [{
"id": 1,
"rowIndex": 1,
"colIndex": 1
},
{
"id": 2,
"rowIndex": 1,
"colIndex": 2
},
{
"id": 3,
"rowIndex": 1,
"colIndex": 4
},
{
"id": 4,
"rowIndex": 1,
"colIndex": 6
}
]}
和HTML结构如下: -
<table id="tblLayout"><tbody> </tbody></table>
我正在使用jQuery ajax来获取JSON数据。
$.ajax(
{
url : "/hello/data.json",
type: "GET",
success: function(data)
{
var tbl = data.tblDetails;
tbl.forEach(item)
{
var html = item.id;
$('#tblLayout> tbody > tr:eq('+(item.rowIndex)+') td:eq('+(item.colIndex)+')').append(html);
}
},
error:function(e)
{
}
})
现在如何将html附加到表tblLayout中指定的row-col。
答案 0 :(得分:1)
我不确定这是否是确切的解决方案,但这是我为所需布局所做的。
我用ul替换了表格: -
<ul id="tblLayout"></ul>
jQuery ajax
$.ajax(
{
url : "/hello/data.json",
type: "GET",
success: function(data)
{
var tbl = data.tblDetails;
tbl.forEach(item)
{
var html ="<li class='seat style='position:absolute;top:" + (item.rowIndex * 50) + "px;left:" + (item.colIndex * 50) + "px;'>" + item.id+ "</li>";
$('#tblLayout>).append(html);
}
},
error:function(e)
{
}
})
答案 1 :(得分:0)
您从&#34; data.json&#34;获取数据以JSON格式。试试这个:
$.ajax({
url: "data.json",
type: "GET",
success: function (data) {
var tbl = JSON.parse(data).tblDetails;
$.each(tbl, function (k, v) {
var html = v.id;
$('#tblLayout> tbody > tr:eq(' + (v.rowIndex) + ') td:eq(' + (v.colIndex) + ')').append(html);
});
},
error: function (e) {
}
});