來自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 。 您將來可能會發現它很有用。 在我看來，用這個官方插件生成表比手工生成要好得多。