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