1

我正在尝试调整 Andy Langton 的 show/hide/mini-accordion ( 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>
4

2 回答 2

5

你需要类似的东西：

$(this).parent().parent().next('.toggle').toggle('slow')

或者

$(this).closest('tr').next('.toggle').toggle('slow');

您只需进行一次 parent() 调用即可将您带到 TD，您需要升级到 TR。

于 2009-07-31T15:31:45.553 回答
0

如果我删除 style="display:none;" 这对我有用 从切换 TR。

你会注意到他也在做的例子：

 $('.toggle').hide();

这就是隐藏切换分类元素的原因。

于 2009-07-31T15:20:13.933 回答