The previous page filled the table after the page loaded with data from an array included in the page. The process can be run to replace the data rows in response to any event.

HTML  

To use this method the HTML needs to include a properly formed table. It can be the minimum as shown below or a filled table where the data rows will be replaced later.

<div id="tableDiv">
    <table id="tbl" class="" summary="">
        <thead>
            <tr><th id="fname">First Name</th><th id="lname">Last Name</th><th id="dept">Dept</th><th id="office">Office</th></tr></thead>
        </thead>
        <tbody id="data-area"><tr><td></td></tr></tbody>
    </table>
</div>

Every table has a tbody whether it is coded or not. If it has not been coded the browser will add it. The tbody holds the data rows that we're changing, and by explicitly coding a tbody there is an ID available to used to store a reference to it in the variable dataArea.

JavaScript   

 1. function fillTable(dataArea, source) {
 2.     var row, dataRow;
 3.     var i, j, k, l;
 4.     var text = (dataArea.innerText?"innerText":(dataArea.textContent? "textContent": "innerHTML"));
 5.     i = dataArea.rows.length;
 6.
 7.     while (i--) {
 8.        dataArea.deleteRow(i);
 9.     }
10.
11.     for (i = 0,j = source.length; i < j; i++) {
12.        /* The first "cell" in the source data 
13.         * for each row is the row ID. The for-loop
14.         * starts with k = 1 as the display data and 
15.         * stops at 5 because only four columns out 
16.         * of six are displayed.
17.         */
18.        row = dataArea.insertRow(i);
19.        dataRow = source[i];
20.        row.id = dataRow[0]; 
21.
22.        for (k = 1; k < 5; k++) { 
23.            cell = row.insertCell(k-1);
24.            cell[text] = dataRow[k];
25.        }
26.    }
27. }

The first step is clearing the existing rows: lines 7 through 9. The while-loop runs from the last row up. Using the while-loop is faster than a for-loop; albeit, only slightly, and working from the bottom up is, as expected, faster than working from the top row down.

A pair of nested for-loops are used to fill the table. Inspite of data showing while loops to be faster than for loops, there was no performance benefit using a while loop.

The array simulates data from a database where the first cell contains the row's primary key. Frequently, this is an automatically incremented number. For that reason, The inner loop starts at 1. And, since there is an additional column not shown, the end point is set at five (line 22).

Note: createElement and appendChild proved to be faster than the convenience methods insertRow and insertCell, and can be substituted. The order needs to appended the new row to the table before before the cells are added. This order addresses an IE memory leak (see DOM Insertion Order Leaks).

The last thing to note is line 24. This uses innerText, textContent, or innerHTML depending on browser support. However, cell.appendChild(document.createTextNode(dataRow[k])); proved to be faster. It's not used here because the intent is not to use W3C DOM methods in this test.

Threaded JavaScript  

Finally, the code used to call the fillTable function on the initial table load causes it to run in a separate thread. Calling a function using setTimeout runs that code in a separate thread. For pages heavy with images, this technique allows the browser to continue loading and displaying the images while the table code is running.

<script type="text/javascript">
    setTimeout(function(){fillTable("data-area", dataArray);}, 0);
</script>