javascript - 如何在 jQuery 中使用行和列索引创建表？

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

   }
 })

现在如何在表 tblLayout 中的指定行列附加 html。

Answer 1

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

我用 ul 替换了表:-

<ul id="tblLayout"></ul>

jQuery 技术

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

  }
  })