CODEWITHSUNDEEP
csshtml
amphibient
amphibient

Reputation: 31348

How to render a hierarchy tree in HTML5/CSS?

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?

Upvotes: 1

Views: 2361

Answers (2)

user1467267
user1467267

Reputation:

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.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Use styled and nested unordered lists.

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

Upvotes: 4

Related Questions