使用 jQuery 在表格中显示/隐藏切换
我正在尝试改编 Andy Langton 的 show/hide/mini-accordion (http://andylangton. co.uk/jquery-show-hide）在表中工作。 我想创建一个事件列表，并为每个事件附加一个确认表。 单击最后一个单元格或行中的“确认”按钮后，我希望显示与此特定事件关联的表单。
Andy 的代码用于
$('.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>
I'm trying to adapt Andy Langton's show/hide/mini-accordion (http://andylangton.co.uk/jquery-show-hide) to work within a table. I'm wanting to create a list of events with a confirmation form attached to each event. Upon clicking on the 'confirm' button in the last cell or the row, I would like the form associated with this particular event to be revealed.
Andy's code uses
$('.toggle')
.prev()
.append('<a href="#" class="toggleLink">'+showText+'</a>');
to dynamically add the toggle link (the confirm button) just before the hidden form. This, however, adds the link within the table row and not in a cell. I have therefore changed it to
$('.toggle')
.prev()
.append('<td><a href="#" class="toggleLink">'+showText+'</a></td>');
The link is now in the correct place but does now not invoke the show/hide of the form. When it was placed incorrectly the functionality worked, despite not being quite right. I feel that the selector calling the toggle action is not correct but I don't know how to correct it. It is currently
$(this)
.parent()
.next('.toggle')
.toggle('slow');
This is essentially how the source looks...
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你需要这样的东西：
或者
你只进行一次parent()调用，它会把你带到TD，你需要进入TR。
You need something like:
or
You're only making a single parent() call which brings you to the TD, you need to step up to the TR.
如果我删除 style="display:none;" 这对我有用 从切换TR。
您会在示例中注意到他也在做的事情：
这就是隐藏切换类元素的原因。
This works for me if I remove the style="display:none;" from the toggle TR.
You'll notice in the example he's also doing:
This is what is hiding the toggle classed elements.