如何使用jQuery中的row & col索引创建表?

My JSON looks like this:-

我的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
}
]}

And HTML Structure as below:-

和HTML结构如下:-

<table id="tblLayout"><tbody> </tbody></table>

I am using jQuery ajax to fetch JSON data.

我正在使用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)
   {

   }
 })

Now how do I append the html at the specified row-col in the table tblLayout.

现在，如何在表tblLayout中指定的行-col添加html。

2 个解决方案

#1

I am not sure if this is the exact solution but this is what I did for the required layout.

我不确定这是否是正确的解决方案，但这就是我为所需的布局所做的。

I replaced table with ul as:-

我把表格换成ul as:-

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

  }
  })

#2

You get data from "data.json" in JSON format. Try this:

你从“数据”中获取数据。json在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) {

}

});

#1