jQuery развернуть / свернуть строку иерархической таблицы

Я ищу эффективный способ развернуть / свернуть строки иерархической таблицы, используя jQuery. Проблема в, функциональность раскрытия и свертывания отличается.

  • Изначально отображаются только строки с классом level_0 , все остальные строки скрыты.
  • раскрытие должно показывать только следующий уровень , поэтому щелчок по строке id = 10 должен сделать видимыми только строки с id = 11 и id = 14 . Свернуть
  • с другой стороны, должен свернуться все последовательных строк с более глубоким уровнем, чем текущий. Например, нажатие «Свернуть» в строке id = 10 должно скрыть строки с идентификаторами 11, 12, 13, 14 , если они видны.

Данные таблицы выглядят следующим образом:

<table id="mytable">
    <tr class="level_0" id="10">...</td>
    <tr class="level_1 parent_10" id="11">...</td>
    <tr class="level_2 parent_11" id="12">...</td>
    <tr class="level_2 parent_11" id="13">...</td>
    <tr class="level_1 parent_10" id="14">...</td>
    <tr class="level_0" id="15">...</td>
</table>

Мое нерабочее решение:

$('#mytable tr').live('click', function() {
  var toggleClass = 'parent_' + $(this).attr('id');
  $(this).nextAll('tr').each(function() {
    if ($(this).is('.'+toggleClass)) {
      $(this).toggleClass("showme");
    }
  });
});

Проблема в том, что он сворачивает только строки следующего уровня. Видимые и более глубокие строки уровня под выбранной строкой по-прежнему отображаются.


Может ли кто-нибудь дать мне несколько советов о том, как я могу сделать это эффективно? HTML-код может быть скорректирован при необходимости.

Спасибо за любые подсказки.

6
задан Brandon Wamboldt 15 May 2014 в 12:32
поделиться