来自Javascript数组的HTML表

Question

Please can someone help me to refactor the method below. The method is generating an html table from an array.

 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"));
    } 

I want to make the above method generic, so that the foreach loops are not written manually and the user can just enter a filters list and the table is generated with 6 columns and whatever rows needed.

Answer 1

First of all, do not place inline styles like that. Even though you'd like to, do it in other way, like for example create dynamic style element. I know that's stupid to keep strict practices on tables with very few cells, but who knows- maybe in future you'll build tables with 5000 cells or so, then you'll see differences in memory usage and parsing time :)

Second of all, see this fiddle and try to analyse: https://jsfiddle.net/prowseed/sdxdy6qm/

Basically we have to make some assumptions while rendering the table, so it is not fully generic, because we are expecting some output, yet we know how many columns we want to display and what type of cells we'd have in each of them.

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

I just wanted to let you know that there is a powerful datatables plug-in for jQuery . You can find it here DataTables . You might find it useful in the future. In my opinion it's much better to generate tables with this official plugin than by hand.