使用JavaScript为DataTables生成变量HTML表

背景

我试图生成一个变量HTML表，用于DataTables

我已经构建了一个web查看器，其中包含两个相互依赖的选择框。当您在“选择选项卡”中选择一个选项时，“选择列”将更改。更改“选择列”时，“选择属性”将更改。等等

“selectattribute”的结果放在一个数组中，我想用它来生成DataTables所需的tableheader

例如：

假设

myArray

看起来像

[“aaa”、“bbb”、“ccc”、“ddd”、“eee”]

，生成的报告应该像下面的代码

问题

因为

myArray

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

如何创建一个函数，使其循环通过

myArray

，并根据

myArray

中的数据生成报告

编辑：

我的代码现在可以使用了，但是当我尝试将其合并到web viewer代码中时，出现了一个错误： 报告混乱不堪，如下所示：

这是什么原因造成的？我如何让我的代码在JSFIDLE之外工作

代码

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

aaa
bbb
ccc
ddd
eee

你可以在

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

你可以在

---

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

您愿意使用表格标题吗？我想您需要的是。这将允许您更新已生成为datatable的表@Ramkee的回答很好，但在表初始化一次后，您无法轻松编辑它-无论如何不能使用不同的列。我已经使用类似的方法来销毁和重建当前（静态）报告。现在我只需要让它变得动态。你愿意使用表头吗？我想你需要的是。这将允许您更新已生成为datatable的表@Ramkee的回答很好，但在表初始化一次后，您无法轻松编辑它-无论如何不能使用不同的列。我已经使用类似的方法来销毁和重建当前（静态）报告。现在我只需要让它充满活力。我应该更清楚一点。我想要的是表格标题，而不是表格行/数据。我对你的代码进行了一些编辑，以生成我的意思。但是，我无法让代码在JSFIDLE之外工作，请参阅我编辑的问题。我应该更清楚一点。我想要的是表格标题，而不是表格行/数据。我对你的代码进行了一些编辑，以生成我的意思。但是，我无法让代码在JSFIDLE之外工作，请参阅我编辑的问题。

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

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