Question

我的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。

Answer 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)
  {

  }
  })

Answer 2

您从＆＃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) {

}

}）;

如何使用row＆amp; amp创建表格？ jQuery中的col索引？

2 个答案: