About this example

Data for the table is loaded from an external XML file. You can view the XML file (or, in Netscape 6+, its source code) for this example's data. Once the XML document is loaded into a hidden non-HTML document object, the scripts walk the DOM tree hierarchy to extract data and assign it to table cells in the dynamically-generated table. You could combine this XML data source example with the sorted table columns shown in the dynamic tables example, but I would recommend first converting the XML DOM tree into JavaScript arrays of objects that are more easily and quickly sortable than the XML DOM tree or the table's HTML. This example is compatible with IE 6 for Windows, or Netscape 6 and later. IE 6 displays a scary alert message when loading the external XML data. If I find a workaround, I'll work it into the example. 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, 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.