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

StackOverflow https://stackoverflow.com/questions/1213032

  •  06-07-2019
  •  | 
  •  

Вопрос

Я пытаюсь адаптировать шоу Энди Лэнгтона / спрятать мини-аккордеон (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>
Это было полезно?

Решение

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

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

или

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

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

Другие советы

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

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

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

Это то, что скрывает переключаемые классифицированные элементы.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top