About this example

Data for the table is passed along with the document as a JavaScript array of objects. When the page loads, scripts dynamically generate the table body's content. Links at the tops of columns trigger JavaScript array sorting routines, and the table body is re-drawn via W3C DOM table modification methods. This example is compatible with Internet Explorer 6 or later for Windows, Netscape 6 or later (although redraw bugs in the Gecko engine require a setTimeout() to allow table content to be cleared from the screen before redrawing the table), and even Apple's Safari. Bugs in IE/Mac table modification operations (short of dynamically generating the entire table each time) prevent this technique from working in that browser. Adapted from Dynamic HTML: The Definitive Reference, 2nd Edition.

Update (02April2003): I have modified the dynamic table creation code to use straight element and text node creation techniques, instead of the DOM's specialized table row and cell insertion methods (and innerHTML for cell content). Upon extensive testing with enormous tables, the revised approach is the most efficient way to create tables by script, even though more script statements execute in the process. The new technique uses the DOM DocumentFragment object, which is supported in IE/Windows only starting with Version 6.