Building an HTML table using JavaScript

Question

More readable way to do this?

renderHtmlTable(function(tableItems) {
 
  var tableArray,_i,item,_len;
  tableArray = ['<table id = sampleTable ><thead><tr>' +
                        '<th>Header 1</th>' +
                        '<th>Header 2</th>' +
                        '<th>Header 3</th>' +
                        '<th>Header 4</th>' +
                        '</tr></thead>'];
  
  for (_i = 0, _len = tableItems.length; _i < _len; _i++) {
    item = tableItems[_i];

    tableArray.push('<tr><td>' + item.foo + '</td>' + 
                      '<td>' + item.bar + '</td>' +
                      '<td>' + item.baz + '</td>' +
                      '<td>' + item.qux + '</td></tr>')
  }          

  tableArray.push('</table>');

 ($('#TableDiv')).html(function() {
   return lessonArray.join("");
 });

Answer 1

this seems a little bit more readable (at least to me :)

    var table = $("<table>").attr("id", "sampleTable ")
        .append($("<thead>")
                .append($("<tr>")
                    .append($("<th>").text("Header 1"))
                    .append($("<th>").text("Header 2"))
                    .append($("<th>").text("Header 3"))
                    .append($("<th>").text("Header 4"))
                )
        );

    for (var i = 0; i < 10; i++) {
        table.append($("<tr>")
                .append($("<td>").text("foo"))
                .append($("<td>").text("bar"))
                .append($("<td>").text("foo"))
                .append($("<td>").text("bar"))
        );
    }
    table.appendTo("body");

Answer 2

Use mustache.js! It's a js templating engine which will point you in the right direction :)