来自Javascript数组的HTML表

Question

请有人可以帮助我重构下面的方法。 该方法从数组生成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列和所需的任何行。

Answer 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);

Answer 2

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