Question

我正在尝试从json生成并填充引导表。 json对象如下所示： [{"1":[{field1:data1,...},{...},...],"2":[{...},...]...}]

从json生成表的jQuery函数如下所示：

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库生成的完全相同的代码结构。的 BUT！ 当我填写它们时，没有任何事情发生，不是错误，也不是成功，尽管其他人都这样做。

编辑1：

bootstrap-table库转换为：

<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);

动态克隆和填充表

1 个答案: