小编Dek*_*ken的帖子

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

我正在努力让Andy Langton的表演/隐藏/迷你手风琴(http://andylangton.co.uk/jquery-show-hide)适应桌面.我想要创建一个事件列表,并在每个事件附加一个确认表单.点击最后一个单元格或行中的"确认"按钮后,我希望显示与此特定事件关联的表单.

安迪的代码使用

$('.toggle')
    .prev()
    .append('<a href="#" class="toggleLink">'+showText+'</a>');
Run Code Online (Sandbox Code Playgroud)

在隐藏表单之前动态添加切换链接(确认按钮).但是,这会在表格行中添加链接,而不是在单元格中添加.因此,我已将其更改为

$('.toggle')
    .prev()
    .append('<td><a href="#" class="toggleLink">'+showText+'</a></td>');
Run Code Online (Sandbox Code Playgroud)

链接现在位于正确的位置,但现在不会调用表单的显示/隐藏.当它被错误地放置时,功能有效,尽管不是很正确.我觉得调用切换操作的选择器不正确,但我不知道如何纠正它.目前是

$(this)
    .parent()
    .next('.toggle')
    .toggle('slow');
Run Code Online (Sandbox Code Playgroud)

这基本上就是源代码的样子......

<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>
Run Code Online (Sandbox Code Playgroud)

jquery show toggle hide

1
推荐指数
1
解决办法
1万
查看次数

标签 统计

hide ×1

jquery ×1

show ×1

toggle ×1