如何在HTML表格中呈现树？ [英] How do I present a tree in an HTML table?
问题描述
我还在每个人上显示了一些信息，所以我正在使用一个表，有几列。
我想知道什么是最好的方式来显示这个，以便下层的人看起来缩进，但避免数据内容和显示每个数字意味着什么的标题之间的不匹配。
我主要是在寻找偷窃的想法:-)你有没有看过或做过这样的网站？
编辑：感谢您到目前为止所有的答案。
我想我没能正确解释我想要的做。
这是一个人的列表，但是这个报告的存在的原因是每个人附加的数字，而不是列表本身。
对于这个列表中的每个人，要显示数据到右边，需要对齐，例如在底部有总计等。
图片，如果你愿意，拥有Windows资源管理器，左侧的树可以打开和关闭文件夹，然后在每个文件夹的右侧，您都可以看到有多少个文件，哪些信息等等。像你一样在Windows资源管理器中的文件（在详细信息视图中）中，右侧窗格中只有在左侧的树中执行此操作。
（这不是我在做什么，但这是我可以想到的最接近的比喻）
这就是为什么我倾向于做一个表而不是列表。
如果这些仅仅是人们的名字，或者一个文件夹树，我完全同意嵌套< ul>是必须要走的路。在这种情况下我的问题是我需要为每个项目显示的额外数据是整个报告中最重要的部分。
我没有答案，但是对于那些无法可视化OP的需求的人来说，我有一个例证。
树视图中的Unix QPS（可视化进程管理器）
Google图像搜索找到几个示例图像。
个人而言，会喜欢知道如何在浏览器中实现这一点。
编辑：添加了一个示例图像：
alt text http://www.student.nada.kth.se/~f91-men/ qps / tree.png
编辑：粗体实现
<！doctype html public - // w3c // dtd xhtml 1.0 strict // zhhttp://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd\">
< html>
< head>
< style>
.removed
{
display：none;
}
.expands
{
cursor：pointer;光标：手;
}
.child1 td：first-child
{
padding-left：1em;
}
.child2 td：first-child
{
padding-left：2em;
}
< / style>
< script>
函数toggle（）
{
for（var i = 0; i< arguments.length; i ++）
{
with（document.getElementById ]））
{
if（className.indexOf（'removed'）> -1）
{
className = className.replace（'removed'）;
}
else
{
className + ='removed';
}
}
}
}
< / script>
< / head>
< body>
< table>
< thead>
< tr>
< th> Person< / th>
< Prop< 1>
Prop 2< th>
< 3> Prop 3< / th>
< / tr>
< / thead>
< tbody>
< tr id =p1class =expandingonclick =toggle（'p2'，'p3'）>
< td> P1< / td>
< td> a< / td>
< td> b< / td>
< td> c< / td>
< / tr>
< tr id =p2class =removed child1>
< td> P2< / td>
< td> a< / td>
< td> b< / td>
< td> c< / td>
< / tr>
< tr id =p3class =已删除child2>
< td> P3< / td>
< td> a< / td>
< td> b< / td>
< td> c< / td>
< / tr>
< / tbody>
< tfoot>
< tr>
< td>总计：< / td>
< td> x< / td>
< td> y< / td>
< td> z< / td>
< / tr>
< / tfoot>
< / table>
< / body>
< / html>
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 or 3 levels). I'm also showing a number of pieces of information on each person, so I'm using a table, with several columns.
I'm wondering what's the best way to display this so that people in lower levels look "indented", but avoiding a mismatch between the data contents and the headers showing what each number means...
I'm mostly looking for stealing ideas here :-) Have you ever seen or done a site that has something like this?
Edit: Thank you for all the answers so far.
I think I failed to correctly explain what I'm trying to do.
This is a list of people, but the reason of existence of this report is the numbers attached to each person, not the list itself.
For each person in this "list", I'm going to show data to their right, that needs to be aligned, for example, to have "totals" at the bottom, etc.
Picture, if you will, having Windows Explorer, with the tree on the left, so you can open and close folders, but then, to the right of each folder, you have data like how many files are in there, what kind of information, etc. Just like you get in the right pane in Windows Explorer for "files" (in Details view), only that I do it for the tree on the left. (This is not what i'm doing, but it's the closest analogy I could think of)
This is why I'm leaning towards making a table rather than a List. If these where just the people's names, or a tree of folders, I totally agree than nesting <ul>'s is the way to go. My problem in this case is that the extra data that I need to show for each item is the most important part of the whole report.
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:
alt text http://www.student.nada.kth.se/~f91-men/qps/tree.png
Edit: Crude implementation
<!doctype html public "-//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;
}
.child1 td:first-child
{
padding-left: 1em;
}
.child2 td:first-child
{
padding-left: 2em;
}
</style>
<script>
function toggle()
{
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>
<tr id="p1" class="expands" onclick="toggle('p2','p3')">
<td>P1</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr id="p2" class="removed child1">
<td>P2</td>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr id="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>
这篇关于如何在HTML表格中呈现树？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
