在表格中使用jQuery显示/隐藏切换
题
我正在尝试改编Andy Langton的表演/隐藏/迷你手风琴( http:/ /andylangton.co.uk/jquery-show-hide )在一张桌子里工作。我想要创建一个事件列表,并在每个事件附加一个确认表单。单击最后一个单元格或行中的“确认”按钮后,我希望显示与此特定事件关联的表单。
安迪的代码使用
$('.toggle')
.prev()
.append('<a href="#" class="toggleLink">'+showText+'</a>');
在隐藏表单之前动态添加切换链接(确认按钮)。但是,这会在表格行中添加链接,而不是在单元格中添加。因此我将其改为
$('.toggle')
.prev()
.append('<td><a href="#" class="toggleLink">'+showText+'</a></td>');
链接现在位于正确的位置,但现在不会调用表单的显示/隐藏。当它被错误地放置时,功能有效,尽管不是很正确。我觉得调用切换操作的选择器不正确,但我不知道如何纠正它。目前正在
$(this)
.parent()
.next('.toggle')
.toggle('slow');
这基本上就是源的外观......
<table id="training-events">
<tr>
<th>Date / Time</th>
<th>Event / Venue</th>
<th>Cost</th>
<th>Confirm</th>
</tr>
<tr class="event" valign="top">
<td class="date">Mon, 10 August 2009<br>03:30 PM - 05:30 PM</td>
<td><h5>Regional Director Meeting</td>
<td>No Charge</td>
<td><a href="#" class="toggleLink">Cancel</a></td>
</tr>
<tr style="display: none;" class="toggle">
<td colspan="4">
** FORM **
</td>
</tr>
</table>
解决方案
您需要以下内容:
$(this).parent().parent().next('.toggle').toggle('slow')
或
$(this).closest('tr').next('.toggle').toggle('slow');
你只是进行一次单亲()呼叫,这会将你带到TD,你需要升级到TR。
其他提示
如果我删除style =&quot; display:none;&quot;这对我有用。来自切换TR。
你会在示例中注意到他也在做:
$('.toggle').hide();
这就是隐藏切换分类元素的原因。
不隶属于 StackOverflow