使用 HTML/Javascript 折叠/展开表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3325867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Folding/Unfolding table with HTML/Javascript
提问by prosseek
I have a table which is pretty big, so I need a way to unfold it all the time, and unfold it only necessary.
我有一张很大的桌子，所以我需要一种方法可以一直展开它，并且只在必要时展开它。
How can I do that with HTML? Do I need Javascript for this? If so, what's the code for this?
我怎样才能用 HTML 做到这一点？我需要为此使用Javascript吗？如果是这样，这个代码是什么？
采纳答案by fantactuka
If you will use jquery you can check the code below.
如果您将使用 jquery，您可以查看下面的代码。
In css:
在 CSS 中：
.collapsed-table tr {
display: none;
}
In html:
在 HTML 中：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<table class="collapsed-table">
<caption>Expand/collapce</caption>
<tr>
<td></td>
</tr>
....
</table>
<script type="text/javascript">
$('.collapsed-table > caption').click(function() {
$(this).toggleClass('collapsed-table');
})
</script>
回答by Yoha? Berreby
I know it's an old question but others can have the same problem and no one have provided a complete solution, so if you want to fold / unfold something with an animation, I developed a script named TextShowerthat allows you to do that. It's highly customizable and you can edit its source freely. Hope this helps :)
我知道这是一个老问题，但其他人可能会遇到同样的问题，并且没有人提供完整的解决方案，因此如果您想使用动画折叠/展开某些内容，我开发了一个名为TextShower的脚本，可以让您做到这一点。它是高度可定制的，您可以自由编辑其来源。希望这可以帮助 ：）
回答by Dan Stocker
Keep the header (thead) visible at all times and toggle the visibility of the body (tbody) when the user clicks on the folding button.
始终保持标题 (thead) 可见，并在用户单击折叠按钮时切换正文 (tbody) 的可见性。
Using jQuery:
使用jQuery：
$('#foldbutton').click(function()
{
$('tbody').toggle();
});
