javascript - 创建内容动态变化的 HTML 表格

Question

如果已经有人问过类似的问题，请问..

我想创建一个具有以下功能的 HTML 表格:

• 如果 myFunction 没有返回结果，那么它只显示标题
• 时不时地myFunction返回一些数据，需要显示在这个表中
• 表格必须可调整大小，即当我们拖动窗口边框时，它会随之调整其边框的大小，而无需重新排列行/列

这是我当前的表格:

<div id="result">
  <table id="myTable" class="display" style="width:100%">
    <tr>
      <th>Header1</th>
      <th>Header2</th>
      <th>Header3</th>
    </tr>
  </table>
</div>

JavaScript:

function myFunction() {
  $.ajax({
    type: "GET",
    url: 'some',
    dataType: 'json',
    data: parameters,
    success: function (response) {
      myTable.empty().show(); // to clear
      // html table content calculation...
      myTable.append(new html);
    }
  });
}

每次我运行 myFunction 时，我都会得到没有标题的表格，因为变量为空。但除此之外，我不明白如何在不重新加载页面的情况下动态更新内容。你能帮忙吗？

Answer 1

最好按Datatable走. 在这里你可以使用 server-side processing这是创建动态表的最佳方式。