javascript - 如何在 Javascript 中实现可折叠的表格行？

Question

我想要可以动态折叠网页中某些行的表格，例如:

    |   Title   |   Foo   |   Bar   |
    ---------------------------------
    | + My First Section            |
    ---------------------------------
    | + My Second Section           |
    ---------------------------------

可以动态扩展到

    |   Title   |   Foo   |   Bar   |
    ---------------------------------
    | - My First Section            |
    ---------------------------------
    | 1st Title |    42   |  $10.00 |
    ---------------------------------
    | 2nd Title |    74   |  $12.00 |
    ---------------------------------
    | + My Second Section           |
    ---------------------------------

当我按下 + 符号时。

是否有任何 JavaScript 库可以帮助我做这样的事情，或者是否有一些神奇的 native 命令可以轻松地为我做这件事？

Answer 1

将每个部分放在不同的 tbody 元素中，每个元素都有一个 id 属性。使每个 tbody 的第一行成为单个标题单元格(具有适当的 colspan)，其中包含您的部分标题文本和指向 #the_tbody_id 的 anchor 。然后:

1. 添加 CSS:

   tbody[id]:not(:target) > tr:first-child + tr { 显示:无!重要；

2. 或者，对于非部分 CSS3 浏览器，添加 Javascript 以隐藏每个 tbody 中的非第一行(例如，循环通过 tablelement.getElementsByTagName("tbody"))，并将 anchor 挂接到在点击时切换它们的显示属性(例如，循环 tbodyelement.getElementsByTagName("tr"))。