patternjavascriptMinor

Building an HTML table using JavaScript

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

javascriptbuildingusinghtmltable

Problem

More readable way to do this?

renderHtmlTable(function(tableItems) {
 
  var tableArray,_i,item,_len;
  tableArray = ['' +
                        'Header 1' +
                        'Header 2' +
                        'Header 3' +
                        'Header 4' +
                        ''];
  
  for (_i = 0, _len = tableItems.length; _i ' + item.foo + '' + 
                      '' + item.bar + '' +
                      '' + item.baz + '' +
                      '' + item.qux + '')
  }          

  tableArray.push('');

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

Solution

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

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

    for (var i = 0; i ")
                .append($("").text("foo"))
                .append($("").text("bar"))
                .append($("").text("foo"))
                .append($("").text("bar"))
        );
    }
    table.appendTo("body");

Code Snippets

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

Context

StackExchange Code Review Q#8517, answer score: 3

Revisions (0)

No revisions yet.