動態克隆和填充表

Question

我想從json生成並填充引導表。 JSON對象看起來像這樣： [{"1":[{field1:data1,...},{...},...],"2":[{...},...]...}]

jQuery函數從JSON生成表看起來像這樣：

function fill_table(){ 
     host = $.url('?host');  //gets parameter from url 
     $.ajax({ 
      type: 'POST', 
      url: "/cgi-bin/lalala/some.py", 
      dataType: "json", 
      data: {"target":"ports", "host":host}, 
      success: function(response) { 
      var table = $("#porttablediv .bootstrap-table") //For cloning table 
       $.each(response[0], function (key, value){ //Just generating tables 
       html = "<h1>Module "+key+"</h1>"; 
       $("#porttablediv").append(html) 
       var a = table.clone(true,true).appendTo("#porttablediv"); 
       a.find("table").attr("id", key)    //For later fill <-- PROBLEM? 
       }) 
       $.each(response[0], function (key, value){ //filling tables 
       $("#"+key).bootstrapTable('load',value) 
       }) 
      }, 
     }); 
     } 

所以表是否被正確產生和具有完全相同的代碼結構作爲bootstrap-table庫生成的。 但是！ 當我填補他們，沒有任何反應，沒有錯誤，既不成功，但其他人做。

EDIT 1：

自舉表庫將這個：

<table id="porttable" class="table table-bordered" data-toggle="table" data-click-to-select="true" data-show-refresh="true" data-show-columns="true"  data-show-export="true" data-search="true" > 
    <thead> 
     <tr> 
      <th data-field="name" data-sortable="true" >Name</th> 
      <th data-field="status" data-sortable="true">Status</th> 
      <th data-field="speed" data-sortable="true" >Speed</th> 
      <th data-field="label" data-sortable="true" >Label</th> 
      <th data-field="module" > Module</th> 
     </tr> 
    </thead> 
</table> 

向該：

<div class="bootstrap-table" style="display: none;"> 
    <div class="fixed-table-toolbar">...</div> 
    <div class="fixed-table-container" style="padding-bottom: 0px;"> 
    <div class="fixed-table-header" style="display: none;"><table></table></div> 
    <div class="fixed-table-body"><div class="fixed-table-loading" style="top: 42px;">Por favor espere...</div> 
     <table id="porttable" class="table table-bordered table-hover" data-toggle="table" data-click-to-select="true" data-show-refresh="true" data-show-columns="true" data-show-export="true" data-search="true"> 
     ... 
     </table> 
    </div> 
    </div> 
    <div class="fixed-table-footer" style="display: none;">...</div> 
</div> 

Answer 1

在代碼

var a = table.clone(true,true).appendTo("#porttablediv"); 
    a.find("table").attr("id", key) 

此行table.clone(true,true).appendTo("#porttablediv");返回table而不是"#porttablediv"。 S0下一行a.find("table").attr("id", key)應改爲a.attr("id", key)爲a是table

---

所以最終的代碼是

var a = table.clone(true,true).appendTo("#porttablediv"); 
a.attr("id", key); 

或者乾脆

var a = table.clone(true,true).appendTo("#porttablediv").attr("id", key);