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库可以帮助我做这样的事情，或者是否有一些神奇的本机命令可以为我轻松做到这一点？

Answer 1

将每个部分放在不同的tbody元素中，每个元素都有一个id属性。使用节标题文本和#the_tbody_id的锚点，使每个tbody的第一行成为单个标题单元格（具有相应的colspan）。然后：

添加CSS：

tbody [id]：not（：target）＆gt; tr：first-child + tr {display：none！important; }
或者，对于非部分CSS3浏览器，添加Javascript以隐藏每个tbodys中的非第一行（例如，循环通过tablelement.getElementsByTagName（“tbody”）），并将锚点挂钩到在点击时切换他们的显示属性（例如，循环通过tbodyelement.getElementsByTagName（“tr”））。

Answer 2

你只需要写一个div，每个TR里面都没有display。在“+”符号上，单击将div的显示更改为阻止，然后单击“ - ”再次将其更改为无。

为每个div分配一个唯一的ID。

例如：

<tr>
    <td>
       My Section>
       <div style='display:none'>
          Content goes here
       </div>
   </td>        
</tr>

Answer 3

Dojo和Jquery都可以为你做这件事，但是如果你不想使用javascript库，这对于简单的JavaScript来说并不难。使用onclick事件处理程序进行+/-切换，编写一个执行的函数，该函数将块元素（您的一组行）设置为display：none（一个css规则）。如果您打算使用表来显示它，请不要尝试动态隐藏或显示表行，它不能正常工作。

Answer 4

您可以将这些行的显示属性设置为none，并在单击时将其重置为“table-row”。

但我认为IE不适合呈现这一点，但是......

如何在Javascript中实现可折叠表行？

4 个答案: