Question

我得到以下JSON结果，我需要在UI中绑定它：

<div id="itemListTable">
    <tbody id="invcdTlbBody" class="text-left">
    </tbody>

HTML：

for(j=0;J<somelength;j++) {
    //create table header here
    var html = `"<table class='table' id='tab' width='100%' 
        style='margin-bottom: 0px;'><thead><th>NAME</th><th>CLASS</th></thead></table>";`
    $('#itemListTable').html(html); 


    for(i=0;i<somelength;j++){
        invcdTlbTr += '<tr>'
            + '<td width="20%">' + std.name + '</td>'
            + '<td width="35%">' + std.class + '</td>'
            + '</tr>';    
    }
    invcdTlbBody.innerHTML = invcdTlbBody.innerHTML
}

使用Javascript：

{{1}}

我得到以下输出：

名称类

abc first

def first

ijk第二

lmn second

但我需要关注输出

名称类

abc first

def first

名称类

ijk第二

lmn second

如何重复表格标题？

Answer 1

您可以使用Array.map遍历数组并template string（``）为每个外部数组创建一个表格，标题代表名称和类。

var json = [[
    {
        "name":"abc",
        "class" : "first"
    },
    {
        "name":"def",
        "class" : "first"
    }
],[
    {
        "name":"ijk",
        "class" : "second"
    },
    {
        "name":"lmn",
        "class" : "second"
    }
]];

var table = json.map(items => {
  var tbody = items.map(item => `
    <tr>
      <td>${item.name}</td>
      <td>${item.class}</td>
    </tr>
  `).join('');
  return  `
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Class</th>
        </tr>
      </thead>
      <tbody>
        ${tbody}
      </tbody>
    </table>
  `;
}).join('');

var itemListTable = document.getElementById('itemListTable');
itemListTable.innerHTML = table;

<div id="itemListTable">
</div>

在div里面动态创建多个表jquery

1 个答案: