Html table from Javascript array

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.

Maciej Kwas · Accepted Answer · 2017-08-04 00:41:45Z

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

Tornike Shavishvili · Accepted Answer · 2017-08-09 08:26:48Z

0

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.

answered Aug 9, 2017 at 8:26

Tornike Shavishvili

1,3546 gold badges20 silver badges41 bronze badges

Collectives™ on Stack Overflow

Html table from Javascript array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related