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