与html折叠表

我有一张表，我想要显示特定服务器的存储使用，可用和总计。但是，这些服务器有多个驱动器，我希望默认视图显示所有使用的存储的总计，所有这些都可用，全部用于总计。但点击该行会将其删除以查看故障。我将输入到每个单元格的所有数据，但我不知道如何执行下拉（折叠和展开）。与html折叠表

例如。崩溃视图

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

来源

2014-05-22 user1052448

看看这[问题] [1]和jsfiddl它链接到。 [1]：http://stackoverflow.com/questions/20594817/table-rows-collapse-expand-css – RSSM

使用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隐藏他们的onload否则他们可以看到隐藏TD小号

.expand1 { display: none; 
} 

.expand2 { display: none; 
}

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

来源

2014-05-22 17:14:14 21CmOfPain

这将是巨大的，但我忘了提，我只想要一个类别扩展，而不是一切。意思是，如果我点击“使用”这一行，它就会扩展使用的部分。不可用。 – user1052448

让我更新我的jsfiddle！ – 21CmOfPain

太棒了！感谢你的帮助。我们是否也可以不使用输入按钮，而只需点击该行？ – user1052448

JavaScript函数对此很好。只需为每个服务器具有驱动器1/2和ID的行添加类，然后在单击行时可以执行.show和.hide。

来源

2014-05-22 17:10:28

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

或者你可以从jQuery的http://jqueryui.com/accordion/

来源

2014-05-22 17:10:52 TheBokiya

回答

相关问题