用html折叠表格

Question

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

例如。折叠视图

 <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>

原文由 user1052448 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

First set class and id s so you can call them with JS Note I had to do it for every TD because it wouldn’不要让我使用 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 否则他们可以看到隐藏的 TD s

 .expand1 { display: none;
}

.expand2 { display: none;
}

有关详细信息，请访问 http://www.w3schools.com/jquery/jquery_hide_show.asp

原文由 Pain 发布，翻译遵循 CC BY-SA 3.0 许可协议