使用JavaScript为DataTables生成变量HTML表

Question

背景

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

我建立了一个Web浏览器，其中包含两个相互依赖的选择框。 当您在“选择表格”中选择一个选项时，“选择列”将更改。 更改“选择列”时，“选择属性”将更改。 等等。

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

例：

假设myArray类似于["aaa", "bbb", "ccc", "ddd", "eee"] ，则生成的报告应类似于以下代码。

题

由于myArray没有固定的大小和内容，因此我不能仅在索引文件中创建静态HTML表。

如何制作一个遍历myArray并根据myArray的数据生成报告的函数？

编辑：

现在，我的代码已在JSfiddle中运行 ，但是当我尝试将其合并到Web查看器代码中时，出现错误： 该报告被弄乱了，看起来像这样：

是什么原因造成的？如何使我的代码在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中找到演示

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