Javascript 展开/折叠 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5568368/
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
Expand / Collapse HTML Tables
提问by Anish Sharma
I have an HTML table which is generated dynamically from server.
我有一个从服务器动态生成的 HTML 表。
I want to have an expand/collapse in this html table that is when I click on expand I should get a new column and rows and on collapse, it should be as it was before.
我想在这个 html 表中有一个展开/折叠，当我点击展开时，我应该得到一个新的列和行，在折叠时，它应该和以前一样。
I don't want to use any 3rd party plugin for it. I want to use jQuery and Ajax.
我不想为此使用任何 3rd 方插件。我想使用 jQuery 和 Ajax。
Can you help me or provide any info on how can I do this?
你能帮我或提供任何关于我如何做到这一点的信息吗？
回答by Trufa
Ok I think the question is too vague to be answered completely if you think about.
好吧，我认为这个问题太模糊了，如果你仔细想想的话，无法完全回答。
Where are the contents of the new columns, and rows, coming from? What structure do you have? What've you tried already? What didn't work? David Thomascomment.
新列和行的内容从何而来？你有什么结构？你已经尝试过什么？什么不起作用？大卫·托马斯评论。
If you don't want to use a jQuery plugin like this oneit means you will have to do it yourself and a) nobody here will do it for you completely b) much less without any information, that would just be guessing.
如果您不想使用像这样的 jQuery 插件，这意味着您必须自己做，并且 a) 这里没有人会完全为您做 b) 更不用说没有任何信息，那只是猜测。
That said here is a quick and dirty example of what your approach should be like.
也就是说，这里是一个快速而肮脏的例子，说明您的方法应该是什么样的。
HTML
HTML
<table border="1">
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
jQuery
jQuery
$(".clickable").click(function() {
$(this).next().toggle();
});
As I said it's just an example, it's not scalable (doesn't even support hiding two rows) you can see a demo here.
正如我所说，这只是一个示例，它不可扩展（甚至不支持隐藏两行），您可以在此处查看演示。
I can update the answer with a better more personalized answer if you update your question.
如果您更新您的问题，我可以用更好、更个性化的答案来更新答案。
But if you want to build it yourself, this are some of this could come in handy:
但是，如果您想自己构建它，那么其中一些可能会派上用场：
.show()
.hide()
.toggle()
.animate()
:nth-child
.children()
.show（）
.hide（）
.toggle（）
.animate（）
：第n个孩子
。孩子（）
And many other depending on your approach.
还有许多其他取决于您的方法。
Good luck!
祝你好运！
回答by Ernesto
Here is a quick example, I hope It helps if I understood your question correctly.
这是一个简单的例子，如果我正确理解你的问题，我希望它会有所帮助。
With this structure:
使用这种结构：
<a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
<thead>
<tr>
<td>
HEAD
</td>
<td>
HEAD
</td>
<td>
HEAD
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
</tbody>
</table>
Maybe you could do something like this:
也许你可以这样做：
$(document).ready(function () {
$(".expand").click(function () {
$("#mytable tbody").show("slow");
});
$(".collapse").click(function () {
$("#mytable tbody").hide("fast");
});
});
回答by tony gil
An accordionis a simple, elegant solution: javascript and css.
手风琴是一个简单、优雅的解决方案：javascript 和 css。
This fiddleis from the W3Schools explanation above.
这个小提琴来自上面的 W3Schools 解释。
