使用 jQuery 滑动切换一组表格行
Posted
技术标签:
【中文标题】使用 jQuery 滑动切换一组表格行【英文标题】：Using jQuery to slideToggle a group of Table Rows 【发布时间】：2011-02-24 23:24:07 【问题描述】：我对 javascript 和 jQuery 还很陌生，所以希望这将是一个快速的解决方案。我需要显示一个包含可分为多个类别的数据的表格，并且我想实现一个 slideToggle 来隐藏/显示每个给定类别中的所有观察结果。
下面的代码应该（理想情况下）显示一个有 4 列和 9 行的表格，每组 3 行前面都有一个绿色的“Section i”行。我希望每个 Section 标题都作为一个 slideToggle 来展开或折叠它下面的所有行。现在，没有什么是崩溃的。有什么想法吗？
<head>
<style type="text/css">
tdpadding:5px;
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
$(".flip").click(function()
$(this).next(".section").slideToggle();
);
);
</script>
</head>
<body>
<p>
<table id="main_table">
<thead>
<tr class="firstline">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="4" class="flip"> Section 1 </td>
</tr>
<div class="section">
<tr>
<td>item 111</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
</tr>
<tr>
<td>item 121</td>
<td>item 122</td>
<td>item 123</td>
<td>item 124</td>
</tr>
<tr>
<td>item 131</td>
<td>item 132</td>
<td>item 133</td>
<td>item 134</td>
</tr>
</div>
<tr style="background-color:green; color:white">
<td colspan="4" class="flip"> Section 2 </td>
</tr>
<div class="section">
<tr>
<td>item 211</td>
<td>item 212</td>
<td>item 213</td>
<td>item 214</td>
</tr>
<tr>
<td>item 221</td>
<td>item 222</td>
<td>item 223</td>
<td>item 224</td>
</tr>
<tr>
<td>item 231</td>
<td>item 232</td>
<td>item 233</td>
<td>item 234</td>
</tr>
</div>
<tr style="background-color:green; color:white">
<td colspan="4" class="flip"> Section 3 </td>
</tr>
<div class="section">
<tr>
<td>item 311</td>
<td>item 312</td>
<td>item 313</td>
<td>item 314</td>
</tr>
<tr>
<td>item 321</td>
<td>item 322</td>
<td>item 323</td>
<td>item 324</td>
</tr>
<tr>
<td>item 331</td>
<td>item 332</td>
<td>item 333</td>
<td>item 334</td>
</tr>
</div>
</tbody>
</table>
</p>
</body>
【问题讨论】：
第一：你不能在table和td之间使用div。第二：td.flip 没有元素 next()（它没有兄弟姐妹）。
我在尝试用 jQuery 和表格做类似的事情时遇到了真正的问题，似乎表格并不能很好地发挥作用，所以我放弃了表格并使用了 div 来更好地工作:-)跨度>
你能把最终的工作代码贴在这里吗？
【参考方案1】：
您不能像这样将<div>s 混入<table>，而是使用额外的<tbody> 元素。在您的回调中，this 是没有兄弟姐妹的 <td> 元素，因此 .next 没有任何用处；您想返回，直到找到与您感兴趣的.section 相同深度的东西，然后从那里调用.next。
您的 html 应该看起来更像这样：
<table id="main_table">
<thead>
<tr class="firstline">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="4" class="flip"> Section 1 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 111</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
</tr>
<!-- ... -->
你的点击处理程序是这样的：
$('.flip').click(function()
$(this)
.closest('tbody')
.next('.section')
.toggle('fast');
);
.closest 调用会追溯到您的祖先，直到找到<tbody>，然后您调用.next。
更新 jsfiddle：http://jsfiddle.net/ambiguous/Udxyb/4/
【讨论】：
请注意，原始问题要求使用 slideToggle，这显然不适用于此方法。将toggle 更改为 slideToggle 会中断动画。 jsfiddle.net/m83Pc
@supertrue：这是很久以前的事了，所以我不确定slideToggle 到toggle 的切换是从哪里来的。我怀疑动画问题是<table> 中通常显示和嵌套问题的副作用。我会四处看看，看看我能想出什么。
@supertrue: 如果你切换到slideToggle(10000) 并在一个好的DOM 检查器中观察.section，你会看到动画只是调整了height。您还会注意到 <tbody> 完全忽略了 height（抱歉，我对此没有明确的参考），除非您更改其 display (jsfiddle.net/ambiguous/m83Pc/1) 但这会导致其他奇怪。以上是关于使用 jQuery 滑动切换一组表格行的主要内容，如果未能解决你的问题，请参考以下文章