使用jQuery在表格中显示/隐藏切换

我正在尝试改变Andy Langton的显示/隐藏/迷你手风琴（http://andylangton.co.uk/jquery-show-hide）在表格中工作。我想创建一个附有每个事件的确认表单的事件列表。点击最后一个单元格或行中的“确认”按钮后，我想要显示与此特定事件相关的表单。使用jQuery在表格中显示/隐藏切换

安迪的代码使用

$('.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>

来源

2009-07-31 Dekken

你需要的东西，如：

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

或

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

你只是做一个单亲（）调用，它带给你的TD，则需要加强对TR 。

来源

2009-07-31 15:31:45 doomspork

这个工作对我来说，如果我删除样式=“显示：无;”从切换TR。

你会在例如注意到他也在做：

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

这就是隐藏切换归类元素。

来源

2009-07-31 15:20:13 chsh

哪个“这个”你指的是为你工作的？ – 2009-07-31 15:22:31

哎呀，这是一个失败的粘贴。我试图向Doomspork提供的两个parent（）调用添加类似的代码。 – chsh 2009-07-31 15:36:19

使用jQuery在表格中显示/隐藏切换

回答

相关问题