表格行可以展开和关闭吗？
是否可以使表格行展开并折叠？ 任何人都可以将我推荐给一个脚本或一个例子吗？ 如果可能的话，我更喜欢jQuery。 我有一个想要实现的绘图概念：
是的，表格行可以上下滑动，但它很难看，因为它会改变表格的形状并使一切都跳跃。 相反，在每个td放置和元素……像p或h2等有意义的东西。
关于如何实现表格幻灯片切换…
将click处理程序放在整个表上， .stopPropagation()并检查点击的内容可能是最简单的。
如果单击带有colspan的行中的td，请关闭其中的p 。 如果它不是带有colspan的行中的td，则关闭然后切换下一行的p 。
它本质上是将你所有的书面内容包装在td内的一个元素中， 因为你永远不想slideUp td或tr或表格形状会改变！
就像是：
$(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(); } }); });
尝试使用这个jsFiddle示例。
…并试试这个jsFiddle显示+ – -切换的实现。
HTML只需要有几个td的交替行，然后是一个colspan大于1的行。你可以很容易地调整细节。
HTML看起来像：
Name
Age
Info
Blah blah blah blah blah blah blah.
Name
Age
Info
Blah blah blah blah blah blah blah.
Name
Age
Info
Blah blah blah blah blah blah blah.
你可以这样做：
HTML
Cell 1 Cell 2 Cell 3 Cell 4 Show Extra
jQuery的
$("a[id^=show_]").click(function(event) { $("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow"); event.preventDefault(); });
查看JSFiddle上的演示
希望这可以帮助 ！
这取决于你的标记，但它肯定可以工作，我使用以下：
jQuery的
$(document).ready( function() { $('td p').slideUp(); $('td h2').click( function(){ $(this).siblings('p').slideToggle(); } ); } );
HTML
Actor Which Doctor Significant companion William Hartnell
First
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Susan Foreman
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.
Patrick Troughton
Second
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Jamie MacCrimmon
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.
Jon Pertwee
Third
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Jo Grant
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.
我接近它的方法是折叠行的单元格中的特定元素，因此，在我的情况下，行将slideUp()因为段落被隐藏，并仍然留下一个元素， h2点击以重新 – 显示内容。 如果该行完全崩溃，则没有明显的方法可以将其恢复。
在JS Bin演示
正如@Peter Ajtai指出的那样，在评论中，上述方法只关注一个细胞（尽管是故意的）。 要扩展所有子p元素，这将起作用：
$(document).ready( function() { $('td p').slideUp(); $('td h2').click( function(){ $(this).closest('tr').find('p').slideToggle(); } ); } );
在JS Bin演示
jQuery的
$(function() { $("td[colspan=3]").find("div").hide(); $("tr").click(function(event) { var $target = $(event.target); $target.closest("tr").next().find("div").slideToggle(); }); });
HTML
one two three data
data data data data
这很像上面的例子。 我在尝试实现该示例时发现，如果要展开的表行在未展开时被点击，它将消失，并且它将不再可展开
为了解决这个问题，我只是删除了单击可展开元素以向上滑动的function，并使其只能使用上面的表格行进行切换。
我还对html和相应的jQuery做了一些小改动。
注意：我本来只是发表了评论，但我不允许在那里发帖。 只是想发布这个，因为我花了一些时间来弄清楚正在消失的表行发生了什么。
希望这有助于某人！
感谢Peter Ajtai
要回答你的问题，不。 尽管这可能与div有关。 如果function是用div而不是表格完成的，那么唯一的问题就是会导致hazzle。
好吧，我会说使用DIV而不是表格，因为它会更容易（但使用表格没有任何问题）。
我的方法是使用jQuery.ajax并从服务器请求更多数据，这样，选定的DIV（如果使用表，则为TD）将根据请求的内容自动扩展。
这样，它可以节省带宽并使其更快，因为您不会一次加载所有内容。 它仅在选中时加载。