How to create a collapsing tree table in html/css/js?

Question

I have some data to display that is both tabular and hierarchical. I\'d like to let the user be able to expand and collapse the nodes.

Sort of like this, except func

Answer 1

You can try jQuery treegrid (http://maxazan.github.io/jquery-treegrid/) or jQuery treetable (http://ludo.cubicphuse.nl/jquery-treetable/)

Both are using HTML

tag format and styled the as tree.

The jQuery treetable is using data-tt-id and data-tt-parent-id for determining the parent and child of the tree. Usage example:

Parent

Child

$("#tree").treetable({ expandable: true });

Meanwhile, jQuery treegrid is using only class for styling the tree. Usage example:

    

        
Root node
Additional info
    
    

        
Node 1-1
Additional info
    
    

        
Node 1-2
Additional info
    
    

        
Node 1-2-1
Additional info