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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在jquery数据表中动态添加列并插入数据相关的知识,希望对你有一定的参考价值。

我有一个像这样的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);
         }  
    } 

我在添加列时遇到问题,我的列也作为行插入。 enter image description here

答案
$("#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);
     }
} 

以上是关于在jquery数据表中动态添加列并插入数据的主要内容,如果未能解决你的问题,请参考以下文章

如何在数据表中动态创建列并为其赋值?

如何读取 CSV、再添加两列并插入依赖于当前列的数据?

将范围插入工作表中已使用数据的最后一列

jquery如何动态的添加一条html代码

在 mysql 中设置一个唯一列并在 codeigniter 中显示 flashdata

使用 ajax 和 jquery 从数据库中动态添加预先填充的表单