The method demo'ed on the previous page loads the table using W3C DOM methods exclusively. DOM methods are more verbose leading to the expectation of slower performance. Using DOM methods to replace the tbody is generally faster than using the table methods, and the next method, where the complete table is replaced, is fast. So, it seems worthwhile to try replacing the complete table using DOM methods.

HTML   

<div id="tableDiv">
    <table><tbody><tr><td></td></tr></tbody></table>            
</div>

The HTML is as minimal, but a complete table. A table tag is required in the HTML.

JavaScript   

 1. function fillTable(dataDiv, source) {
 2.     var orgTable = dataDiv.getElementsByTagName("table")[0];
 3.     var row, cell, txtNode;
 4.
 5.     var table = document.createElement("table");
 6.     table.setAttribute("id", "tbl");
 7.     var head = document.createElement("thead");
 8.     var body = document.createElement("tbody");
 9.    
10.     row = document.createElement("tr");
11.
12.     txtNode = document.createTextNode("First Name");
13.     cell = document.createElement("th");
14.     cell.setAttribute("id", "fname");
15.     cell.appendChild(txtNode);
16.     row.appendChild(cell);
17.
18.     txtNode = document.createTextNode("Last Name");
19.     cell = document.createElement("th");
20.     cell.setAttribute("id", "lname");
21.     cell.appendChild(txtNode);
22.     row.appendChild(cell);
23.
24.     txtNode = document.createTextNode("Dept");
25.     cell = document.createElement("th");
26.     cell.setAttribute("id", "dept");
27.     cell.appendChild(txtNode);
28.     row.appendChild(cell);
29.
30.     txtNode = document.createTextNode("Office");
31.     cell = document.createElement("th");
32.     cell.setAttribute("id", "office");
33.     cell.appendChild(txtNode);
34.    
35.     row.appendChild(cell);
36. 
37.     head.appendChild(row);
38.     table.appendChild(head);
39.
40.     for (var i = 0, j = source.length; i < j; i++) {
41.         dataRow = source[i];
42.         row = document.createElement("tr");
43.         row.setAttribute("id", dataRow[0]);
44.
45.         for (var k = 1; k < 5; k++) {
46.             txtNode = document.createTextNode(dataRow[k]);
47.             cell = document.createElement("td");
48.             cell.appendChild(txtNode);
49.             row.appendChild(cell);
50.         }
51.         body.appendChild(row);
52.     }
53.     table.appendChild(body);
54.     dataDiv.replaceChild(table, orgTable);
55.     row = cell = txtNode = head = body = table = null;
56. }

There's quite a bit of JavaScript. It builds a table one element at a time appending them together to form a table with headers and rows. Then the newly created table replaces the child table of the container div. there are no tricks; just straight forward code.

The setAttribute are not required for this example, but are for table sorting and other designs that require table loading.

Line 55, may not be necessary, but is intended to prevent memory leaking in IE.

Threaded JavaScript  

It is possible to cause JavaScript to run in theads concurrent with other processes. Runing the table load process in its own thread, when it is run on page load, allows images to finish loading.

<script type="text/javascript">
    setTimeout(function(){loadTable2("tableDiv", dataArray);}, 0);
</script>

The snippet of code above is located just before the closing body tag. Using the setTimeout function causes our table loading code to run in a separate thread.