使用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在表格中顯示/隱藏切換

回答

相關問題