Использование jQuery show/hide toggle в таблице

Я пытаюсь настроить отображение/скрытие/мини-аккордеон Энди Лэнгтона (http://andylangton.co.uk/jquery-show-hide) для работы внутри таблицы. Я хочу создать список событий с формой подтверждения, прикрепленной к каждому событию. После нажатия кнопки «подтвердить» в последней ячейке или строке я хотел бы, чтобы форма, связанная с этим конкретным событием, была обнаружена.Использование jQuery show/hide toggle в таблице

код Энди использует

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

Спасибо, это сработало! :-) Тем не менее, он все равно не отображается правильно, несмотря на то, что, несмотря на то, что строка show/hide установлена на 4 столбца, это не так ... но это проблема, что я напортачил - http: // development. dekken.co.uk/bni/training/ Вы случайно не знаете, как получить это переключение без оживления? Я бы хотел, чтобы он казался одним, а не понемногу. еще раз спасибо. – Dekken

Чтобы показать/скрыть без анимации, вы можете просто использовать toggle(). Что касается строк, то есть две вещи, о которых я могу думать: во-первых, поскольку вы всегда намерены иметь форму, вы можете также создать серверную часть, а не полагаться на javascript, чтобы сделать это. Во-вторых, если по какой-то причине вы не можете добавить форму в html или создать ее на стороне сервера, возможно, лучше добавить элементы DOM индивидуально, а не использовать append для строки HTML. – doomspork

Это работает для меня, если я удалю стиль = «дисплей: нет;» от переключателя TR.

Вы заметите в примере, он также делает:

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

Это то, что скрывается тумблер классифицироваться элементы.

источник

2009-07-31 15:20:13 chsh

Какой из них относится к вам? –

Упс, это была неудачная паста. Я пытался добавить аналогичный код в то, что Doomspork предоставил с помощью двух вызовов parent(). – chsh

Использование jQuery show/hide toggle в таблице

ответ

Смежные вопросы