How to render a hierarchy tree in HTML5/CSS?

Question

I have not done any web development as of late. Was wondering if there is an easy way to load a data representation of a hierarchy tree such as

node             parent
---------------------------------
root             
Level1.Node1     root
Level1.Node2     root
Level1.Node3     root
Level2.Node1     Level1.Node1
Level2.Node2     Level1.Node2
Level2.Node3     Level1.Node2

And get it rendered like

root
  --------Level1.Node1
               --------------Level2.Node1 
  --------Level1.Node2
               --------------Level2.Node2
               --------------Level2.Node3

without using fancy tables?

Diodeus - James MacFarlane · Accepted Answer · 2013-03-06 16:18:29Z

4

Use styled and nested unordered lists.

<ul>
    <li>Level 1
        <ul>
            <li>Level 2</li>
         </ul>
    </li>
</ul>

answered Mar 6, 2013 at 16:18

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FelipeAls Over a year ago

hanshillen.github.com/jqtest/#goto_tree is an excellent example of such nested lists (uses a modified version of jQuery UI to be very accessible including keyboard and a bunch of ARIA)

Diodeus - James MacFarlane Over a year ago

That's a pretty handy tool. Thanks for sharing.

user1467267 · Accepted Answer · 2013-03-06 16:18:41Z

Practically you just want to keep on checking the Parent's Children. This is not a HTML5/CSS thing, but a JavaScript thing to check the DOM (node) roots.

Use the WebKit/Firebug tools to dump out the HTML DOM Object and see it's attributes. You can see what their properties and methods are and use them to iterate through them until you hit the bottom of each subtag.

console.log(document);
console.log(document.head);

These just return the HTML blocks.

console.log(document.body);

This returns the actual DOM object. You can see in the inspector that you actually get back tons of info to parse on.

Check [children] and [childNodes]. That's where you want to iterate your DOM structure. [nodeName] and [nodeType] help you identify the attributes.

Printing it out you can do with placeholders var offset = ' '; and reloop them or use CSS to render <div> tags with mathematical calculated left-margins.

Collectives™ on Stack Overflow

How to render a hierarchy tree in HTML5/CSS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related