How Do I Present A Tree In An Html Table?

June 25, 2024 Post a Comment

I'm trying to show a tree structure in an HTML table. It's basically a list of people you referred to a site, but you can expand each and see the people they referred too (only 2 o

Solution 1:

I don't have an answer, but I have an illustration for those who have trouble visualizing OP's need.

Unix QPS (visual process manager) in Tree View shows just such a tree/table.

Google image search finds a few sample images.

Personally, would love to know how to implement this in a browser.

Edit: Added a sample image:

_{(source: nada.kth.se)}

Edit: Crude implementation

<!doctype htmlpublic"-//w3c//dtd xhtml 1.0 strict//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html><head><style>.removed
            {
                display:none;
            }

            .expands
            {
                cursor:pointer; cursor:hand;
            }

            .child1td:first-child
            {
                padding-left: 1em;
            }

            .child2td:first-child
            {
                padding-left: 2em;
            }
        </style><script>functiontoggle()
            {
                for(var i=0; i<arguments.length; i++)
                {
                    with(document.getElementById(arguments[i]))
                    {
                        if(className.indexOf('removed') > -1)
                        {
                            className = className.replace('removed');
                        }
                        else
                        {
                            className += ' removed';
                        }
                    }
                }
            }
        </script></head><body><table><thead><tr><th>Person</th><th>Prop 1</th><th>Prop 2</th><th>Prop 3</th></tr></thead><tbody><trid="p1"class="expands"onclick="toggle('p2','p3')"><td>P1</td><td>a</td><td>b</td><td>c</td></tr><trid="p2"class="removed child1"><td>P2</td><td>a</td><td>b</td><td>c</td></tr><trid="p3"class="removed child2"><td>P3</td><td>a</td><td>b</td><td>c</td></tr></tbody><tfoot><tr><td>Totals:</td><td>x</td><td>y</td><td>z</td></tr></tfoot></table></body></html>

Solution 2:

Use the semantically appropriate tag for lists: <ul>. simply nest them. you can hide part of the structure, or maybe create it on the fly.

<ulid='n0>
  <li id='n1'>One guy</li><liid='n2'>Second guy
    <ulid='n2.0'><liid='n2.1'>first one of second guy</li><liid='n2.2'>last of second</li></ul></li><liid='n3'>Third one</li></ul>

and so on. the naming of items is up to you, i usually do it either reflect the struture (as here), or the DB ids.

Solution 3:

The names of such a layout are:

tree grid / treegrid (ex: Ajax)
tree list view / treelistview (ex: Microsoft .Net)
tree model / treemodel (ex: Qt Framework)

Searches on "treegrid" and "tree grid html5" seem to give the best results for html implementations.

Solution 4:

...It's basically a list of people...

You don't - this is not tabular data, it's a list (<ul>)

Solution 5:

We're using a bunch of DIVs to display similar structure. Odd ones (1st position, 3rd, 5th, etc.) each have a one-row table inside, even ones (2nd, 4th, etc.) are initially CSS'ed to 'display:none'. The first cell of each table contains a link which triggers the DIV underneath it to be populated with data that comes back from the server via an AJAX call. The data which comes back could have the same structure as the first-level stuff (a number of "expandable" rows), or just 'Details' about the record in question. Nothing semantic about it, but it looks the way the client wants it and it works. Here are the screenshots:

Initial list before being expanded: alt text http://img26.imageshack.us/img26/5986/28656041.png

After clicking on the last link (70036720): alt text http://img15.imageshack.us/img15/7455/40596280.png

After clicking on a link in the second level (70036720-1): alt text http://img197.imageshack.us/img197/4588/37964248.png