Использование переключателя отображения/скрытия jQuery в таблице

Я пытаюсь адаптировать 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>

hide toggle jquery show
person Dekken    schedule 31.07.2009    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вам нужно что-то вроде:

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

or

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

Вы делаете только один вызов parent(), который приводит вас к TD, вам нужно перейти к TR.

person doomspork    schedule 31.07.2009
comment
Спасибо, это сработало! :-) Тем не менее, он по-прежнему отображается неправильно, несмотря на то, что строка отображения/скрытия настроена на охват 4 столбцов, это не так... но это, вероятно, что-то, что я напортачил - development.dekken.co.uk/bni/training Вы случайно не знаете, как получить это переключение без анимации в ? Я бы хотел, чтобы это отображалось как единое целое, а не по частям. еще раз спасибо. - person Dekken; 03.08.2009
comment
Чтобы показать/скрыть без анимации, вы можете просто использовать toggle(). Что касается строк, я могу думать о двух вещах: во-первых, поскольку вы всегда намереваетесь иметь форму, вы могли бы также сгенерировать ее на стороне сервера, а не полагаться на javascript для этого. Во-вторых, если по какой-то причине вы не можете добавить форму в html или сгенерировать ее на стороне сервера, может быть лучше добавить отдельные элементы DOM, а не использовать добавление для строки HTML. - person doomspork; 04.08.2009

arrow_upward
0
arrow_downward

Это работает для меня, если я удалю style="display:none;" от переключателя TR.

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

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

Это то, что скрывает элементы класса toggle.

person chsh    schedule 31.07.2009
comment
Ой, это была неудачная паста. Я пытался добавить аналогичный код к тому, что Doomspork предоставил с двумя вызовами parent(). - person chsh; 31.07.2009