Dynamic HTML Tables: Improving Performance
Subject:   Even faster
Date:   2003-11-04 06:00:16
From:   anonymous2
Response to: Even faster

Yes, Jeff, you are obviously right.

So let us build long strings in single string expressions, however complex they may be,
and put them into as few array elements as possible.
Using a 'while' loop instead of 'for' might make a small difference, too.
But I would still consider using the push() method.

This approach does not work well, however, when we have an unknown or variable number of table columns, because entire table rows cannot be processed at a time.

// Allocate temporary array.
var output = new Array();

// Transfer table data to array.
for (var j = 0; j < tableData.length; j++)
// Access j-th row of data.
var t = tableData[j];

// Process entire table row.
"<tr class='tr" + (j%2) +
"'><td class='col0'>" + t.alpha +
"</td><td class='col1'>" + t.beta +
"</td><td class='col2'>" + t.gamma +
"</td><td class='col3'>" + +
"</td><td class='col4'>" + t.epsilon +

// Produce html output.
document.getElementById("tableWrap").innerHTML =
"<table id='myTable1'><tbody id='myTbody'>" +
output.join("") +
"</tbody></table>" ;

// Release.
output = null;

Hubert Kauker