是否可以让表格行展开和折叠？任何人都可以参考我的脚本或示例吗？
如果可能的话，我更喜欢 jQuery。我有一个想要实现的绘图概念：
【问题讨论】：
<div>s 的列表，但这似乎不太符合语义...：\
标签： jquery tablelayout
是的，表格行可以上下滑动，但它很难看，因为它会改变表格的形状，让所有东西都跳起来。取而代之的是，在每个 td 中添加一个元素，这样才有意义，例如 p 或 h2 等。
至于实现表格滑动切换...
将点击处理程序放在整个表格上可能是最简单的，.stopPropagation() 和 check what was clicked。
如果单击带有 colspan 的行中的 td，请关闭其中的 p。如果它不是带有 colspan 的连续 td，则关闭然后切换下一行的 p。
必须将所有书面内容包装在tds 内的一个元素中，因为你永远不想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();
}
});
});
... and try out this jsFiddle showing implementation of a + - - toggle.
HTML 只需要有几行交替的 tds 行，然后是一行 td 的 colspan 大于 1。显然，您可以很容易地调整细节。
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>
【讨论】：
你可以这样做：
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
$("a[id^=show_]").click(function(event) {
$("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow");
event.preventDefault();
});
【讨论】：
这取决于你的标记，但它肯定可以工作，我使用了以下：
$(document).ready(
function() {
$('td p').slideUp();
$('td h2').click(
function(){
$(this).siblings('p').slideToggle();
}
);
}
);
<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>
我处理它的方法是折叠行的单元格中的特定元素，这样，在我的情况下，行将 slideUp() 因为段落被隐藏，并且仍然留下一个元素 h2 来点击以重新显示内容。如果该行完全倒塌，就没有显而易见的方法可以将其恢复。
正如@Peter Ajtai 所指出的，在 cmets 中，上述方法仅关注一个单元格（尽管是故意的）。要扩展所有子 p 元素，这将起作用：
$(document).ready(
function() {
$('td p').slideUp();
$('td h2').click(
function(){
$(this).closest('tr').find('p').slideToggle();
}
);
}
);
【讨论】：
sibling 或next 和.find("p")，这样您就不必折叠td 或tr，然后您可以轻松实现colspan 解决方案。 - 查看我的解决方案。
jQuery
$(function() {
$("td[colspan=3]").find("div").hide();
$("tr").click(function(event) {
var $target = $(event.target);
$target.closest("tr").next().find("div").slideToggle();
});
});
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>
这很像前面的例子。我在尝试实现该示例时发现，如果在未展开的情况下单击要展开的表格行，它将消失，并且不再可展开
为了解决这个问题，我只是删除了单击可展开元素以进行向上滑动的功能，并使其只能使用上面的表格行进行切换。
我还对 HTML 和相应的 jQuery 做了一些小的改动。
注意：我本来只是发表评论，但还不允许发表长篇文章。只是想发布这个，因为我花了一点时间才弄清楚消失的表格行发生了什么。
感谢彼得·阿杰泰
【讨论】：
回答你的问题，不。不过，这将是可能的 div 。唯一的问题是，如果功能是用 div 而不是表来完成的，会引起混乱。
【讨论】：
好吧，我会说使用 DIV 而不是表格，因为它会更容易（但使用表格并没有错）。
我的方法是使用 jQuery.ajax 并从服务器请求更多数据，这样，选定的 DIV（或 TD，如果您使用表）将根据请求的内容自动扩展。
这样，它可以节省带宽并使其运行速度更快，因为您不会一次加载所有内容。它仅在被选中时加载。
【讨论】：