来自 Javascript 数组的 Html 表答案

【问题标题】：Html table from Javascript array来自 Javascript 数组的 Html 表
【发布时间】：2017-08-03 21:57:47
【问题描述】：

请有人帮我重构下面的方法。该方法是从一个数组生成一个 html 表。

 function drawHtmlTable(filters) {
        var $table = $("<table style='border: 1px solid black; empty-cells: show;'></table>");
        var $line = $("<tr style='border: 1px solid black;'></tr>");
        var $line1 = $("<tr style='border: 1px solid black;'></tr>");
        var $line2 = $("<tr style='border: 1px solid black;'></tr>");
        for (var i = 0; i < 6; i++) {
            var filter = filters[i];

            $line.append($("<td style='border: 1px solid black;'></td>").html(filter.Label));
            $line.append($("<td style='border: 1px solid black;'></td>").html(filter.Value));
            $table.append($line);
        }
        for (var j = 6; j < 12; j++) {
            var filter1 = filters[j];

            $line1.append($("<td style='border: 1px solid black;'></td>").html(filter1.Label));
            $line1.append($("<td style='border: 1px solid black;'></td>").html(filter1.Value));
            $table.append($line1);
        }
        for (var k = 12; k < 18; k++) {
            var filter2 = filters[k];

            $line2.append($("<td style='border: 1px solid black;'></td>").html(filter2.Label));
            $line2.append($("<td style='border: 1px solid black;'></td>").html(filter2.Value));
            $table.append($line2);
        }
        $table.appendTo($("#filterContainer"));
    }

我想让上面的方法通用，这样就不用手动编写 foreach 循环，用户只需输入一个过滤器列表，表格就会生成 6 列和所需的任何行。

【问题讨论】：

标签： javascript html arrays html-table

【解决方案1】：

首先，不要这样放置内联样式。即使您愿意，也可以以其他方式进行，例如创建动态 style 元素。我知道在单元格很少的表格上保持严格的做法是愚蠢的，但是谁知道-也许将来您会构建带有 5000 个左右单元格的表格，然后您会看到内存使用和解析时间的差异:)

其次，看看这个小提琴并尝试分析：https://jsfiddle.net/prowseed/sdxdy6qm/

基本上我们必须在渲染表格时做出一些假设，所以它不是完全通用的，因为我们期望一些输出，但我们知道我们想要显示多少列以及我们在每个列中有什么类型的单元格其中。

function tableRenderer(container, arr, columnsCount){
    var table = document.createElement('table'), tr = null;

    for(var i=0; i<arr.length; i++){
        if (i % columnsCount == 0) tr = table.insertRow();
      for(k in arr[i]){
        var td = tr.insertCell();
        td.appendChild(document.createTextNode(arr[i][k]));
      }
    }

    container.appendChild(table);
}
tableRenderer(document.body, arr, 6);

【讨论】：

【解决方案2】：

我只是想让你知道jQuery 有一个强大的数据表插件。你可以在这里找到它DataTables。您将来可能会发现它很有用。在我看来，使用这个官方插件生成表格比手动生成表格要好得多。

【讨论】：