jQuery 表格行可以展开和关闭吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3897396/
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
Can a table row expand and close?
提问by Erik
Is it possible to make a table row expand and collapse? Can anyone refer me to a script or an example?
是否可以使表格行展开和折叠？任何人都可以向我推荐脚本或示例吗？
I prefer jQuery if possible. I have a drawing concept I would like to achieve:
如果可能，我更喜欢 jQuery。我有一个我想实现的绘图概念：
回答by Peter Ajtai
Yes, a table row can slide up and down, but it's ugly, since it changes the shape of the table and makes everything jump. Instead, put and element in each td... something that makes sense like a por h2etc.
是的，表格行可以上下滑动，但它很难看，因为它改变了表格的形状并使所有东西都跳起来。相反，将和元素放入每个td……有意义的东西，例如 ap或h2etc。
For how to implement a table slide toggle...
关于如何实现表格滑动切换...
It's probably simplest to put the click handler on the entire table, .stopPropagation()and check what was clicked.
将 click 处理程序放在整个表格上可能是最简单的，.stopPropagation()并检查 clicked。
If a td in a row with a colspan is clicked, close the pin it. If it's not a td in a row with a colspan, then close then toggle the following row's p.
如果单击带有 colspan 的行中的 td，请关闭其中的 td p。如果它不是带有 colspan 的一行中的 td，则关闭然后切换下一行的p.
It is essentially to wrap all your written content in an element inside the tds, since you never want to slideUpa tdor tror table shape will change!
它本质上是包装所有的书面内容中的一个元素里面tdS，因为你永远不希望slideUp一个td或tr或表的形式将发生变化！
Something like:
就像是：
$(function() {
// Initially hide toggleable content
$("td[colspan=3]").find("p").hide();
// Click handler on entire table
$("table").click(function(event) {
// No bubbling up
event.stopPropagation();
var $target = $(event.target);
// Open and close the appropriate thing
if ( $target.closest("td").attr("colspan") > 1 ) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});?
Try it out with this jsFiddle example.
用这个 jsFiddle 例子试试看。
... and try out this jsFiddle showing implementation of a +- -toggle.
...并尝试这个 jsFiddle 显示一个+--切换的实现。
The HTML just has to have alternating rows of several tds and then a row with a tdof a colspan greater than 1. You can obviously adjust the specifics quite easily.
HTML 只需要有多个tds 的交替行，然后td是 colspan 大于 1 的a 行。显然您可以很容易地调整细节。
The HTML would look something like:
HTML 将类似于：
<table>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
</td></tr>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
</td></tr>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
</td></tr>
</table>?
回答by Valentin Flachsel
You could do it like this:
你可以这样做：
HTML
HTML
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td><a href="#" id="show_1">Show Extra</a></td>
</tr>
<tr>
<td colspan="5">
<div id="extra_1" style="display: none;">
<br>hidden row
<br>hidden row
<br>hidden row
</div>
</td>
</tr>
</table>
jQuery
jQuery
$("a[id^=show_]").click(function(event) {
$("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow");
event.preventDefault();
});
See a demo on JSFiddle
回答by David says reinstate Monica
It depends on your mark-up, but it can certainly be made to work, I used the following:
这取决于您的标记，但它当然可以工作，我使用了以下内容：
jQuery
jQuery
$(document).ready(
function() {
$('td p').slideUp();
$('td h2').click(
function(){
$(this).siblings('p').slideToggle();
}
);
}
);
html
html
<table>
<thead>
<tr>
<th>Actor</th>
<th>Which Doctor</th>
<th>Significant companion</th>
</tr>
</thead>
<tbody>
<tr>
<td><h2>William Hartnell</h2></td>
<td><h2>First</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
<td><h2>Susan Foreman</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
</tr>
<tr>
<td><h2>Patrick Troughton</h2></td>
<td><h2>Second</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
<td><h2>Jamie MacCrimmon</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
</tr>
<tr>
<td><h2>Jon Pertwee</h2></td>
<td><h2>Third</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
<td><h2>Jo Grant</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
</tr>
</tbody>
</table>
The way I approached it is to collapse specific elements within the cells of the row, so that, in my case, the row would slideUp()as the paragraphs were hidden, and still leave an element, h2to click on in order to re-show the content. If the row collapsed entirely there'd be no easily obvious way to bring it back.
我处理它的方法是折叠行的单元格内的特定元素，这样，在我的情况下，该行会slideUp()因为段落被隐藏，而仍然留下一个元素，h2点击以重新显示内容. 如果这一行完全倒塌，就没有容易明显的方法将其恢复。
As @Peter Ajtai noted, in the comments, the above approach focuses on only one cell (though deliberately). To expand all the child pelements this would work:
正如@Peter Ajtai 所指出的，在评论中，上述方法仅关注一个单元格（尽管是故意的）。要扩展所有子p元素，这将起作用：
$(document).ready(
function() {
$('td p').slideUp();
$('td h2').click(
function(){
$(this).closest('tr').find('p').slideToggle();
}
);
}
);
回答by Kyle Andersen
jQuery
jQuery
$(function() {
$("td[colspan=3]").find("div").hide();
$("tr").click(function(event) {
var $target = $(event.target);
$target.closest("tr").next().find("div").slideToggle();
});
});
HTML
HTML
<table>
<thead>
<tr>
<th>one</th><th>two</th><th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td><p>data<p></td><td>data</td><td>data</td>
</tr>
<tr>
<td colspan="3">
<div>
<table>
<tr>
<td>data</td><td>data</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
This is much like a previous example above. I found when trying to implement that example that if the table row to be expanded was clicked while it was not expanded it would disappear, and it would no longer be expandable
这很像前面的例子。我在尝试实现该示例时发现，如果要展开的表格行在未展开时单击它，它将消失，并且不再可展开
To fix that I simply removed the ability to click the expandable element for slide up and made it so that you can only toggle using the above table row.
为了解决这个问题，我简单地删除了单击可扩展元素以向上滑动的功能，并使其只能使用上面的表格行进行切换。
I also made some minor changes to HTML and corresponding jQuery.
我还对 HTML 和相应的 jQuery 进行了一些小的更改。
NOTE: I would have just made a comment but am not allowed to yet therefore the long post. Just wanted to post this as it took me a bit to figure out what was happening to the disappearing table row.
注意：我会刚刚发表评论，但还不允许发表长篇文章。只是想发布这个，因为我花了一点时间才弄清楚消失的表格行发生了什么。
Credit to Peter Ajtai
归功于 Peter Ajtai
回答by netrox
Well, I'd say use the DIV instead of table as it would be much easier (but there's nothing wrong with using tables).
好吧，我会说使用 DIV 而不是表格，因为它会更容易（但使用表格没有任何问题）。
My approach would be to use jQuery.ajax and request more data from server and that way, the selected DIV (or TD if you use table) will automatically expand based on requested content.
我的方法是使用 jQuery.ajax 并从服务器请求更多数据，这样，选定的 DIV（或 TD，如果您使用表）将根据请求的内容自动扩展。
That way, it saves bandwidth and makes it go faster as you don't load all content at once. It loads only when it's selected.
这样，它可以节省带宽并使其运行速度更快，因为您不会一次加载所有内容。它仅在被选中时加载。
回答by Nigel
To answer your question, no. That would be possible with div though. THe only question is would cause a hazzle if the functionality were done with div rather than tables.
回答你的问题，没有。不过用 div 就可以了。唯一的问题是，如果功能是用 div 而不是表格完成的，会引起麻烦。
