Question

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

例如。崩溃视图

＆＃13;

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

＆＃13;

例如。扩展视图

＆＃13;

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

＆＃13;

Answer 1

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

首先设置class和id，以便您可以使用JS调用它们注意我必须为每个TD执行此操作，因为它不会让我使用div或者跨越并隐藏它们。

    <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

Answer 2

javascript函数对此非常有用。只需将类添加到每个服务器具有驱动器1/2和ID的行，然后如果单击行，则可以执行.show和.hide。

Answer 3

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

或者您可以使用jQuery http://jqueryui.com/accordion/

中的Accordion

用html折叠表

3 个答案: