Javascript 如何在'；用JSON中的JS填充什么？

我有这样的想法：

<table id="thatTable" class="table toggle-circle">
  <thead>
  <tr>
    <th>ID</th>
    <th>FieldA</th>
    <th data-hide="all">FieldB</th>
    <th data-hide="all">FieldC</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
  <tr>
      <td colspan="4">
          <div class="text-right">
              <ul class="pagination"></ul>
          </div>
      </td>
  </tr>
  </tfoot>
</table>

var fillThatTable = function (list) {
    $.each(list, function (index, item) {
        $('#thatTable tbody').append($('<tr>')
            .append($('<td>').text(item.ID))
            .append($('<td>').text(item.FieldA))
            .append($('<td>').text(item.FieldB))
            .append($('<td>').text(item.FieldC))
            )
        );
    });
};

我没有得到漂亮的东西，而是收到了一个平均值的过滤表，就像我没有把

$（“#thatTable'）.footable（）

放进去一样。我检查了JS是否已导入，它们是否已导入。是不是因为表的

tbody

中没有任何内容？我错过了什么

梦想：

现实：

---

我更新了PM的小提琴，使FooTable更容易使用：

如果您的html更改为：

<table id="thatTable" class="table toggle-circle">
  <thead>
  <tr>
    <th data-name="ID">ID</th>
    <th data-name="FieldA">FieldA</th>
    <th data-name="FieldB" data-breakpoints="all">FieldB</th>
    <th data-name="FieldC" data-breakpoints="all">FieldC</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
  <tr>
      <td colspan="4">
          <div class="text-right">
              <ul class="pagination"></ul>
          </div>
      </td>
  </tr>
  </tfoot>
</table>

---

您的代码看起来正常工作，

footable（）

正在应用。检查这里，嗯，不起作用，你确定吗？请发送捕获。在该JSFIDLE中，只需删除应用footable的行，即

$（“#thatTable”）.footable（）

。查看该表，然后再次添加该行，并查看它与表之间的差异。是的，它在那里工作，但在我的代码中不工作，并且console不会显示任何与此相关的错误。无论如何，谢谢你。

<table id="thatTable" class="table toggle-circle">
  <thead>
  <tr>
    <th data-name="ID">ID</th>
    <th data-name="FieldA">FieldA</th>
    <th data-name="FieldB" data-breakpoints="all">FieldB</th>
    <th data-name="FieldC" data-breakpoints="all">FieldC</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
  <tr>
      <td colspan="4">
          <div class="text-right">
              <ul class="pagination"></ul>
          </div>
      </td>
  </tr>
  </tfoot>
</table>

$(document).ready(function () {
    var list = [
    {"ID":"1","FieldA":"A1","FieldB":"B1","FieldC":"C1"},
    {"ID":"2","FieldA":"A2","FieldB":"B2","FieldC":"C2"},
    {"ID":"3","FieldA":"A3","FieldB":"B3","FieldC":"C3"}
    ];

    // No need for this
    //fillThatTable();
    $('#thatTable').footable({
        rows: list
    });
});