page 1 of 9 Study: Loading Tables Dynamically

Table of Contents: Introduction; Replace Rows: Table Methods; Code for Table Methods; Replacing Tbody: DOM Methods; Code for Replacing Tbody; Replace Table: DOM Methods; Code for DOM Methods; Replace Table: innerHTML (Best); Code for innerHTML (Best)

Introduction: Loading Tables Dynamically

Situation: Your Web application requires that a table be dynamically (re)loaded. Maybe the source data is included as a JavaScript file from another site, the data may be retrieve through AJAX or an RPC. The data may be in a JavaScript object (Array or Object) so it can be manipulated later (See Table Sorting. AJAX and RPC are covered elsewhere on the site.

The following pages use four different methods to load a table with data from a two dimenstional JavaScript array—it has 61 rows. The methods explored are:

Using the convenience methods: deleteRow, insertRow, and insertCell to replace the rows
Using W3C DOM methods to build a new tbody and replace the orginal.
Replace the table with one built using W3C DOM methods
Replace the table using innerHTML and a string representation to the new table

At the risk of ruining the story, here's how it ends. The last method—replacing the table with innerHTML—works best. It is the fastest across browsers and uses minimal code offering faster download speed.

The source data for these examples is in a two dimensional array included in the page between script tags. Other structures can be used; for example, an array of objects with a property for each cell or an XML document—additional handling would be required for XML.

The pages alternate between demonstrating a method and showing the code for the method demonstrated. Each demonstration page shows the time taken to dynamically load the table and includes a button to reload the table. Click the reload button several times and note the avarage time each method takes. Try this in different browsers. You'll be able to see which method yields the best performmance.

The source data is designed for other demonstration and has more columns than the four displayed in these examples. Also, the first source data element is used as the row ID and not cell data. Consequently, some code elements exist to accommodate this situation.