用html折叠表格答案

【问题标题】：Collapsing table with html用html折叠表格
【发布时间】：2014-07-11 20:31:33
【问题描述】：

我有一个表格，我想显示特定服务器的已用、可用和总存储空间。但是，服务器有多个驱动器，我希望默认视图显示所有已用存储、所有可用存储和所有存储的总数。但是单击该行会将其下拉以查看细分。我会将所有数据输入到每个单元格中，但我不确定如何进行下拉（折叠和展开）。

例如。折叠视图

<table>
     <th></th><th>server 1</th><th>server 2</th>
     <tr><td>used</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>available</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
    </table>

例如。展开视图

  <table>
     <th></th><th>server 1</th><th>server 2</th>
     <tr><td>used</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>available</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
    </table>

【问题讨论】：

看看这个 [question][1] 和它链接到的 jsfiddle。 [1]：stackoverflow.com/questions/20594817/…

标签： html css collapse expand

【解决方案1】：

使用 JQuery 所以你的新 Jsfiddle（更新）：http://jsfiddle.net/5BRsy/3/

首先设置class 和ids，以便您可以使用JS 调用它们注意我必须为每个TD 都这样做，因为它不允许我使用div 或span 并隐藏它们。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table2">
 <th></th><th>server 1</th><th>server 2</th>
 <tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
 <tr><td class="expand1">drive 1</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>
 <tr><td class="expand1">drive 2</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>

 <tr><td class="btn2">available</td><td>1gb</td><td>2gb</td></tr>
 <tr><td class="expand2">drive 1</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
 <tr><td class="expand2">drive 2</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
 <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>

然后使用JS

    $(document).ready(function(){
  $(".btn").click(function(){
    $(".expand1").toggle();
  });
      $(".btn2").click(function(){
    $(".expand2").toggle();
  });
})

还有CSS 隐藏他们 onload 否则他们可以看到隐藏的TDs

.expand1 { display: none;
}

.expand2 { display: none;
}

欲了解更多信息，请访问http://www.w3schools.com/jquery/jquery_hide_show.asp

【讨论】：

这很好，但我忘了提到我只想扩展单个类别，而不是所有内容。意思是，如果我单击“已使用”行 - 它只会扩展已使用的部分。也不可用。
太棒了！感谢你的帮助。我们也可以不使用输入按钮，而只需单击该行吗？
已更新！如果这是您的问题的答案，请将其标记为已解决（只需勾选答案）！
效果很好！有没有在Used, Available旁边使用-/+来显示展开/折叠？
是的，很抱歉延迟回复这里更新的 JSFiddle：“jsfiddle.net/5BRsy/5”所以我从 td 中删除了类，并为每个 td 添加了 2 个跨度，一个用于加号图像，一个用于减号。为了使图像出现，将 CSS 中的“图像路径”更改为图像路径并删除“背景颜色”，记住如果图像太大，您可以使用 .imagesclass { resize:both; 调整 id 大小。 width:14px;[以像素为单位的数量（示例）]} 我也更改了 Java，希望你能理解它们。 :D

【解决方案2】：

一个 javascript 函数会很适合这个。只需将类添加到每个服务器具有驱动器 1/2 和 ID 的行，然后如果单击行，您可以执行 .show 和 .hide 。

【讨论】：

【解决方案3】：

有几个选项。你可以使用这个小jQuery插件：http://sylvain-hamel.github.io/simple-expand/

或者你可以使用 jQuery http://jqueryui.com/accordion/ 中的 Accordion

【讨论】：