使用html折叠表格
使用html折叠表格
提问于 2014-05-23 00:58:40
我有一个表，希望显示特定服务器的已用存储、可用存储和总存储。但是，服务器有多个驱动器，我希望默认视图显示所有已用存储的合计、所有可用存储的合计和所有总存储的合计。但单击行会将其向下拖放以查看细目。我会将所有数据输入到每个单元格中，但我不确定如何进行下拉操作(折叠和展开)。
例如：折叠视图
<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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-05-23 01:14:15
使用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
Stack Overflow用户
发布于 2014-05-23 01:10:29
一个javascript函数可以很好地做到这一点。只需将类添加到具有每个服务器的驱动器1/2和ID的行中，然后如果行被单击，则可以执行.show和.hide。
Stack Overflow用户
发布于 2014-05-23 01:10:53
这里有几个选项。您可以使用这个小的jQuery插件：http://sylvain-hamel.github.io/simple-expand/
或者，您可以使用jQuery http://jqueryui.com/accordion/中的Accordion
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23812997
复制相关文章
相似问题
腾讯云开发者
