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

私はちょうどあなたが強力なのDataTableプラグインjQueryのためにそこにあることを知ってもらいたいです。あなたはここにそれを見つけることができますDataTables。将来的には役に立つかもしれません。私の意見では、この公式プラグインを使って手で作るよりもテーブルを生成するほうがはるかに優れています。