如何在 HTML 表格中呈现树?

2024-03-21

我正在尝试在 HTML 表中显示树结构。它基本上是您提到某个网站的人员列表,但您可以展开每个人员并查看他们也提到的人员(仅 2 或 3 级)。 我还显示了每个人的许多信息,因此我使用了一个包含几列的表格。

我想知道显示此内容的最佳方式是什么,以便较低级别的人员看起来“缩进”,但又避免数据内容和显示每个数字含义的标题之间不匹配......

我主要是在这里寻找窃取想法:-) 你曾经见过或做过一个有类似内容的网站吗?


Edit:感谢您迄今为止的所有回答。

我认为我未能正确解释我想要做什么。 这是一份人员名单,但这份报告存在的原因是每个人所附的数字,而不是名单本身。
对于这个“列表”中的每个人,我将在他们的右侧显示需要对齐的数据,例如,在底部有“总计”等。

想象一下,如果您愿意的话,使用 Windows 资源管理器,左侧有树,这样您就可以打开和关闭文件夹,但是,在每个文件夹的右侧,您可以看到数据,例如其中有多少文件,什么样的信息等。就像您在 Windows 资源管理器的右侧窗格中获取“文件”(在“详细信息”视图中)一样,只是我对左侧的树执行了此操作。 (这不是我正在做的,但这是我能想到的最接近的类比)

这就是为什么我倾向于制作表格而不是列表。 如果这些只是人名或文件夹树,我完全同意嵌套

    是可行的方法。在这种情况下,我的问题是我需要为每个项目显示的额外数据是整个报告中最重要的部分。

对列表使用语义上适当的标签:<ul>。只需将它们嵌套即可。您可以隐藏结构的一部分,或者可以动态创建它。

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

等等。项目的命名由您决定,我通常会反映结构(如此处)或数据库 ID。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 HTML 表格中呈现树? 的相关文章

  • 带有占位符文本的文本框,该文本会逐字符消失

    我正在寻找一种方法来构造带有日期字段占位符文本的文本框 占位符文本将为 xx xx xxxx 并在用户键入时逐个字符消失 留下斜杠 我遇到了以下两个问题 它们似乎解决了使文本立即消失的问题 HTML CSS 制作一个文本框 其中的文本显示为
  • 当选择更改时使用 JQuery 进行检测

    我有一个 Jqgrid 它动态生成这样的选择
  • Javascript - 如何从 location.href 中删除域

    我需要使用 Javascript 从 location href 中删除域名 我有类似的链接 http localhost App User UserOrder aspx id 949abc91 a644 4a02 aebf 96da3ac
  • Javascript document.getElementsByClassName 返回未定义

    我有一个函数应该相当简单 并且应该在加载后完成 以减少初始加载时间 基本上我使用这段代码来获取类 prefImg 的所有元素并用它们做一些事情 但是在firebug中调试时 它说var divsList未定义 function popula
  • HTML 电子邮件:表格还是 div?

    html 电子邮件通讯的 HTML CSS 是否需要采用表格格式 或者我可以使用 DIV 来保证它能够在跨电子邮件客户端上良好地显示吗 我下载了许多模板来看看它们是如何完成的 并以此为基础构建我自己的模板 它们似乎都使用表格 非常感谢任何见
  • 如何获取表单的onSubmit事件?

    我想知道如何抢onsubmit表单中的事件来进行一些表单验证 因为我无权直接访问它 我正在编写一个用于评论的 WordPress 插件 因此无法直接访问表单标签或提交按钮 我在尝试为我的插件执行此操作时感到非常沮丧 因此我在下面编写了一个
  • 使用 RequireJS 的条件注释仅加载 IE7/8 jQuery

    我在我的项目中使用 Require JS 它加载 jQuery 和其他一些与整个网站和所有浏览器相关的 JavaScript 文件 但是 我需要在 Internet Explorer 7 和 8 上使用一些条件 jQuery 我尝试将其放在
  • HTML 表单:POST 对象数组

    提交班级名单 一次添加3名学生 每个学生都有最初 最后的年龄 问题 我们如何才能将所有学生放入数组中 students 0 gt Array first gt first name for 0 last gt last name for 0
  • 显示视频的缩略图

    大家好 在我的应用程序中 用户将复制 YouTube 的视频链接并将其粘贴到文本框中 一旦他单击添加按钮 我就必须显示视频的缩略图 如何从 YouTube 页面呈现视频缩略图 我在前端使用Jquery和HTML5 获取 YouTube 缩略
  • HTML5 -

    Reading 一篇文章 http html5doctor com the article element on the
  • 如何在具有动态高度的固定 div 标题后设置 div 内容样式

    以下情况 div style width 100 place holder for header div div style width 100 margin top 100px content div 我需要标题始终可见且位于顶部 因此该
  • 元素特定区域的背景颜色

    我想要实现的是将悬停效果放在光标的位置上 像这样的东西 https drmportal com https drmportal com 这是一个小提琴 https jsfiddle net onnmwyhd https jsfiddle n
  • 类型错误:无法读取未定义的属性“存在”

    我正在尝试为 jsx 文件编写一个测试用例 在此我能够传递 proptypes 但不是我正确传递 proptypes 的地方 当我运行测试用例时出现错误 下面提供我的错误 测试用例和代码 类型错误 无法读取未定义的属性 存在 不知道如何让它
  • JQuery:检查元素是否处于正常流程中

    使用 jQuery 检查元素是否在正常流程中的最优雅的方法是什么 根据CSS3规范 http www w3 org TR css3 box 如果满足以下条件 则框属于流 其 display 的使用值为 block list item tab
  • 为什么虽然输入的值确实发生了变化,但jquery更改事件没有触发? [复制]

    这个问题在这里已经有答案了 JSFIDDLE http jsfiddle net meXm3 2 网页代码
  • PHP DOMDocument 中 XML 内 HTML 表的 Xpath 查询

    我有一个具有以下树结构的 XML 文件
  • 如何调试@font-face问题?

    我有以下 CSS 代码 theMixPlainSemiBold font face font family theMixPlainSemiBold src url css fonts eot src url css fonts eot ie
  • CakePHP 后退和前进按钮没有布局

    我们正在 CakePHP 中构建一个大型 CMS 并集成了 Croogo 安装 我们最近遇到了一个问题 当用户单击back在浏览器中 或forward按钮 您最终得到的是使用以下命令的视图 ctp 文件blank布局 所以没有样式 js 等
  • 如何使用KDTrees实现最近邻搜索?

    所以 我正在实施一个KD Tree http en wikipedia org wiki Kd tree进行最近邻搜索 我已经构建了树部分 但我认为我没有完全理解搜索部分 关于遍历树来搜索邻居 维基百科文章如下 Starting with
  • Firefox 扩展中的 localStorage

    我正在尝试从 Firefox 扩展访问页面的 localStorage 我的理解是content给出了参考window当前页面的 当我尝试访问页面的 localStorage 时content localStorage 我想我正在得到它的参

随机推荐

  • 通过 VPN 的 Python 请求给出 502 Bad Gateway

    我正在尝试使用以下命令从公司网络内的服务器获取一些数据requests图书馆 我使用 VPN 进入公司网络 并且还设置了公司代理 我尝试访问的地址仅在该公司网络内可见 import requests url http some privat
  • 将 clojure 映射/数组写入文件并读回

    我需要将 clojure 映射保存到文件中并稍后读回以处理它们 这就是我能想到的 有没有更好的方法来完成同样的事情 user gt def my data for a Person1 Person2 b Address1 Address2
  • 对 Python 正在处理其输出的外部程序进行计时

    我想测量我的 Python 脚本使用其输出的外部程序的执行时间 Calling extprogram产生输出的程序 目前我做了类似的事情 import time import subprocess def process output li
  • 尝试将打字稿库与 webpack 捆绑时导出未定义

    我有一个正在用打字稿开发的库 我有通过 tsc 构建它以将其用作 npm 包的解决方案 但 tsc 单独翻译每个文件 我想使用 webpack 将所有内容创建在一个缩小的文件中 但它不起作用 我做了一些测试 使用 module export
  • 如何在页面重新加载时将值保留在 blazor Web 程序集中的单例状态容器中

    我练习和学习blazor web assembly 我正在学习组件之间通信的方法 一种这样的方法是使用状态容器 这按预期工作 但它不能维持页面刷新的价值 这是我的状态容器类 AppState public class AppState pu
  • 了解使用右值/左值的模板参数推导

    这是来自的后续函数模板无法识别左值 https stackoverflow com questions 22166767 template function does not recognize lvalue 22166879 221667
  • C# 中的私有方法单元测试

    Visual Studio 允许通过自动生成的访问器类对私有方法进行单元测试 我编写了一个私有方法的测试 该方法编译成功 但在运行时失败 代码和测试的相当最小的版本是 in project MyProj class TypeA privat
  • 如何将不透明度应用于 CSS 颜色变量?

    我正在使用 Electron 设计一个应用程序 因此我可以访问 CSS 变量 我已经定义了一个颜色变量vars css root color f0f0f0 我想用这个颜色main css 但应用了一些不透明度 element backgro
  • 在 WSO2 Integration Studio 中将双精度数转换为整数

    我正在 XPath 表达式中执行算术运算 在下面的代码中 qty1和qty2是双倍的 因此我得到的结果是双倍的 我想将结果转换为整数并将其保存在属性中 如何在 WSO2 Integration Studio 中实现它
  • CasperJS/PhantomJS 在加载页面时卡住

    我正在使用 phantomjs 运行以下脚本 var casper require casper create var url https itunesconnect apple com itc static login view 1 pa
  • 在 Visual Studio 2017 中使用 Windows 窗体应用程序?

    我正在关注 Udemy 系列 它要求的第一件事是创建一个 Windows 窗体应用程序 使用 C 我不认为这是我的选择之一 这是因为我使用的是免费版本吗 我已经安装了 Windows Template Studio 为了开发WPF Wind
  • 这些 jQuery 就绪函数有什么区别?

    有什么区别 function and document ready function 什么都没有 http api jquery com jQuery jQuery3 这个函数的行为就像 document ready 因为它应该 用于包装其
  • 如何更改Windows系统时区?

    我正在编写一个软件 允许更改 Windows 中使用的当前时区参数 到目前为止 我发现的设置系统范围时区的唯一参考是API 或其变体SetDynamicTimeZoneInformation 但我不太确定如何使用它来更改当前时区 例如 需要
  • 多处理池工作线程中的线程标识符

    我相信Thread ident作为线程的唯一标识符 但现在我看到不同的工作进程multiprocessing poo Pool报告相同的线程标识符threading current thread ident How 根据平台的不同 ID 可
  • 等待新添加的控制事件 - C#

    我在面板中有一个按钮 它将调用另一个方法 该方法将创建一个用户控件来覆盖整个面板 这是面板按钮单击事件的代码 private void btnTarget Click object sender EventArgs e UtilLoader
  • 使用 tryCatch 在 R 中加载数据文件

    我想做的是从本地目录加载数据文件 如果不存在 则从网络服务器下载 目前我正在使用嵌套的 tryCatch 并且它似乎可以工作 这是尝试在 R 中完成此任务的正确方法吗 tryCatch attempt to read file from c
  • Scala 构造函数混乱 - 请澄清

    我对 Scala 构造函数感到非常困惑 例如 我有以下类 它们表示一棵树 其中包含诸如 Add 之类的运算符 并且树上的叶节点是数字 abstract class Node symbol String abstract class Oper
  • 将 UIBarButtonItems 添加到工具栏时出现问题

    我有一个 UINavigationController 和一个 UITableViewController 我想在底部显示一个带有 UIBarButtonItem 的工具栏 工具栏已显示 但按钮不会出现 有人知道为什么吗 void view
  • 在MIPS中,为什么跳转指​​令可以将程序计数器设置为28位目标地址

    在 MIPS 中 32 位跳转指令由 6 位操作码和 26 位我们要设置程序计数器的目标 目标 地址组成 然而 可以将程序计数器设置为 28 位目标地址 如果跳转指令只能容纳 26 位 这怎么可能呢 MIPS 上的指令始终是 4 字节对齐的
  • 如何在 HTML 表格中呈现树?

    我正在尝试在 HTML 表中显示树结构 它基本上是您提到某个网站的人员列表 但您可以展开每个人员并查看他们也提到的人员 仅 2 或 3 级 我还显示了每个人的许多信息 因此我使用了一个包含几列的表格 我想知道显示此内容的最佳方式是什么 以便