html - 用html折叠表格

Question

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

例如。折叠 View

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

例如。展开 View

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

Answer 1

使用 JQuery 所以你的新 Jsfiddle(更新):http://jsfiddle.net/5BRsy/3/

首先设置 class 和 id，这样你就可以用 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 在加载时隐藏它们，否则他们可以看到隐藏的 TD

.expand1 { display: none;
}

.expand2 { display: none;
}

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