在jquery数据表中动态添加列并插入数据

Posted 2021-05-03

我有一个像这样的json

{
  Date: "2017-11-07",
  Items: [
 {
   count: "160",
   period: "0",
 }
 ]
 },
 {
  Date: "2017-11-08",
  Items: [
  {
   count: "106",
   period: "0",
  },
  {
    transCount: "298",
    period: "1",
    tranType: "new"
  }
 ]
 },

对于我想要创建新列的每个日期，并在该列中插入items数组的'count'值。到目前为止我做到了这一点

 $("#dtable-users").append('<table id="dtchurn" class="table table-striped table-bordered"><thead></thead><tbody id="tbody"></tbody></table>');
      for(i=0; i<= jsonStr.length;i++)  
      {   
         var tableColumn = "<th> " + jsonStr[i].Date + "  </th>";
         $("#tbody").append(tableColumn)

         for(j=0; j < jsonStr[i].Items.length;j++)
         {
           var tablerow = "<tr><td>"+ parseInt(jsonStr[i].Items[j].transCount) +"</td></tr>"
           $('#tbody').append(tablerow);
         }  
    } 

我在添加列时遇到问题，我的列也作为行插入。

答案

$("#dtable-users").append('<table id="dtchurn" class="table table-striped table-bordered"><thead></thead><tbody id="tbody"></tbody></table>');
  var tbl_head = '',tbl_rows=''
  for(i=0; i<= jsonStr.length;i++)  
  {   
     var tableColumn = "<th> " + jsonStr[i].Date + "  </th>";
     tbl_head + = tableColumn;

     for(j=0; j < jsonStr[i].Items.length;j++)
     {
       var tablerow = "<tr><td>"+ parseInt(jsonStr[i].Items[j].transCount) +"</td></tr>"
       tbl_rows + = tablerow;
     }
     if(i===jsonStr.length-1)
     {
        $("#tbody").append(tbl_head);
        $('#tbody').append(tbl_rows);
     }
}