我有一个表,希望显示特定服务器的已用存储、可用存储和总存储。但是,服务器有多个驱动器,我希望默认视图显示所有已用存储的合计、所有可用存储的合计和所有总存储的合计。但单击行会将其向下拖放以查看细目。我会将所有数据输入到每个单元格中,但我不确定如何进行下拉操作(折叠和展开)。
例如:折叠视图
<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-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
发布于 2014-05-23 01:10:29
一个javascript函数可以很好地做到这一点。只需将类添加到具有每个服务器的驱动器1/2和ID的行中,然后如果行被单击,则可以执行.show和.hide。
发布于 2014-05-23 01:10:53
这里有几个选项。您可以使用这个小的jQuery插件:http://sylvain-hamel.github.io/simple-expand/
或者,您可以使用jQuery http://jqueryui.com/accordion/中的Accordion
https://stackoverflow.com/questions/23812997
复制相似问题