Application Development Group

Javascript Tree View Example

(version 1.2 - now cross browser compatible)

This updated version of my Tree View example is almost a complete rewrite. The code is now more efficient and uses <div>'s rather than a table. The basic functionality remains the same. For those who used the original version, the major difference seen in the treeAdd function is that it now uses an integer rather than a letter to specify the level of the tree. This made some things a lot easier to deal with in the code and means that we can now have more than 26 levels in the tree, (not that I think that was a major constraint to begin with). This example is fairly well documented and is designed to show some of the more advanced things that can be done with Javascript.  I have tested this with IE 6.0, FF, Opera, NS, and Safari.

Along with my normal view source option I am giving an option to download the files included for this example.  The reason is to provide the image files that make up part of this example.
So how does this work?  What happens in very general terms is that a div is created for each node in the tree.  When the user clicks on the (-) image next to a tree level, the system uses the style parameters for the div to hide that node.  When the user clicks on the (+) image the system makes those rows visible again.