如何渲染HTML5/CSS中的层次结构树？

到目前为止我还没有做过任何网络开发。不知道是否有一个简单的方法来加载层次树如如何渲染HTML5/CSS中的层次结构树？

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

的数据表示，并得到它呈现像

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

，而无需使用特殊的表格？

来源

2013-03-06 amphibient

使用样式化和嵌套无序列表。

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

来源

2013-03-06 16:18:29

http://hanshillen.github.com/jqtest/#goto_tree是这样的嵌套列表的一个很好的例子（使用jQuery UI的修改版本非常容易访问，包括键盘和一堆ARIA） – FelipeAls 2013-03-06 16:20:36

这是一个非常方便工具。感谢分享。 – 2013-03-06 16:21:53

实际上，您只是想继续检查父母的子女。这不是一个HTML5/CSS的东西，而是一个检查DOM（节点）根的JavaScript事情。

使用WebKit/Firebug工具转储出HTML DOM对象并查看它的属性。你可以看到它们的属性和方法，并使用它们遍历它们，直到你触及每个子标签的底部。

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

这些只是返回HTML块。

console.log(document.body);

这将返回实际的DOM对象。你可以在督察看到你实际上回来吨的信息解析。

检查[children]和[childNodes]。这就是你想迭代你的DOM结构的地方。 [nodeName]和[nodeType]可帮助您识别属性。

打印出来，你可以用占位符var offset = ' ';来打印它，并重新使用它们或使用CSS来渲染<div>带有数学计算左边距的标签。

来源

2013-03-06 16:18:41

如何渲染HTML5/CSS中的层次结构树？

回答

相关问题