javascript - 使用 JavaScript 为 DataTables 生成变量 HTML 表

Question

背景

我正在尝试生成一个与 DataTables 一起使用的变量 HTML 表。

我构建了一个网络查看器，其中包含几个相互依赖的选择框。当您在“选择表格”中选择一个选项时，“选择列”会发生变化。当您更改“选择列”时，“选择属性”也会发生变化。等等

“选择属性”的结果放置在一个数组中，我想用它来生成 DataTables 需要的表头。

示例:

假设 myArray 看起来像 ["aaa", "bbb", "ccc", "ddd", "eee"]，生成的报告应该看起来像这样就像下面的代码一样。

问题

因为 myArray 没有固定的大小和内容，所以我不能只在索引文件中创建静态 HTML 表。

如何创建一个循环遍历 myArray 并根据 myArray 中的数据生成报告的函数？

编辑:

我的代码可以在 JSfiddle 中运行但是现在，当我尝试将其合并到我的网络查看器代码中时，我收到错误: 该报告很困惑，如下所示:

是什么原因导致这个问题以及如何让我的代码在 JSfiddle 之外工作？

代码

<div id="report_comes_here">
  <table id="report">
      <thead>
        <tr>
            <th>aaa</th>
            <th>bbb</th>
            <th>ccc</th>
            <th>ddd</th>       
            <th>eee</th>
        </tr>
      </thead>
    </table>
</div>

Answer 1

var array = ["aaa","bbb","ccc","ddd"] ;
var count = array.length;

var TABLE = ' <table id="report" class= "table table-striped table-bordered">';
    TABLE += '<thead ><tr><th>Sample Head</th></tr></thead>'
    TABLE += '<tbody>';
    for (i = 0; i < count; i++) {
        TABLE += "<tr>";
        TABLE += "<td>" + array[i] + "</td>"
        TABLE += "</tr>";
    }
    TABLE += "</tbody></table>";

现在您可以使用 Jquery 将 TABLE 变量附加到所需的 DIV ID

$("#report_comes_here").html(TABLE);
$('#report').DataTable();

您可以在JSfiddle找到演示

如果您发现任何困难，请告诉我。