从 JSON 生成 javascript 中的 HTML 表 [重复]

Posted 2023-03-05

【中文标题】从 JSON 生成 javascript 中的 HTML 表 [重复]

【英文标题】：Generating HTML table in javascript from JSON [duplicate]

【发布时间】：2016-08-11 17:32:24

【问题描述】：

我想从这种类型的 JSON 生成一个 html 表格：

  
   "fields":  
      "Product.Name":[  
         "ql23xx-firmware",
         "setup",
         "ql2500-firmware"
      ],
      "Product.Version":[  
         "3.03.27-3.1.el6-noarch",
         "2.8.14-13.el6-noarch",
         "5.06.02-1.el6-noarch"
      ],
      "Id":[  
         "tdcapa11s"
      ],
      "CMDB.EntityInCharge":[  
         "SUP.CA_SYS"
      ]
   

我可以很容易地做一个像这样的表格：

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>CMDB.EntityInCharge</th>
            <th>Product.Name</th>
            <th>Product.Version</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tdcapa11s</td>
            <td>SUP.CA_SYS</td>
            <td>ql23xx-firmware, setup, ql2500-firmware</td>
            <td>3.03.27-3.1.el6-noarch, 2.8.14-13.el6-noarch, 5.06.02-1.el6-noarch</td>
        </tr>
    </tbody>
</table>

但我想要类似的东西：

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>CMDB.EntityInCharge</th>
            <th>Product.Name</th>
            <th>Product.Version</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tdcapa11s</td>
            <td>SUP.CA_SYS</td>
            <td>ql23xx-firmware</td>
            <td>3.03.27-3.1.el6-noarch</td>
        </tr>
        <tr>
            <td>tdcapa11s</td>
            <td>SUP.CA_SYS</td>
            <td>setup</td>
            <td>2.8.14-13.el6-noarch</td>
        </tr>
        <tr>
            <td>tdcapa11s</td>
            <td>SUP.CA_SYS</td>
            <td>ql2500-firmware</td>
            <td>5.06.02-1.el6-noarch</td>
        </tr>
    </tbody>
</table>

如何用 javascript 生成这个？

我离这个不远了，但我的 javascript 代码实际上对于这样一个简单的事情来说很长

【问题讨论】：

尽管您当前的代码可能很冗长/令人尴尬，但您需要展示它，以便我们可以使用。不要害羞:)

【参考方案1】：

这是您可以做到的一种方法：

body_row.append( td.clone().html( (field == 'Id' || field == 'CMDB.EntityInCharge') ? data.fields[field][0] : data.fields[field][i] ) );

如下面的演示：

var data =   
   "fields":  
      "Id":[  
         "tdcapa11s"
      ],
      "CMDB.EntityInCharge":[  
         "SUP.CA_SYS"
      ],
      "Product.Name":[  
         "ql23xx-firmware",
         "setup",
         "ql2500-firmware"
      ],
      "Product.Version":[  
         "3.03.27-3.1.el6-noarch",
         "2.8.14-13.el6-noarch",
         "5.06.02-1.el6-noarch"
      ]
   

var table = $('<table/>'),
    thead = $('<thead/>'),
    tbody = $('<tbody/>'),
    tr    = $('<tr/>'),
    th    = $('<th/>'),
    td    = $('<td/>');
//header row
var hrow = tr.clone();
for(field in data.fields) 
    hrow.append( th.clone().html( field ) );

//append row to thead and table
table.html( thead.html( hrow ) );
//body rows
for( var i = 0; i < data.fields["Product.Name"].length; i++ ) 
    var brow = tr.clone();
    for(field in data.fields) 
        brow.append( td.clone().html( (field == 'Id' || field == 'CMDB.EntityInCharge') ? data.fields[field][0] : data.fields[field][i] ) );
    
    //append row to tbody
    tbody.append( brow );

//append tbody to table
table.append( tbody );
//append table to page
$('#table').html( table );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table"></div>

【讨论】：

谢谢，像魅力一样工作