Я ищу эффективный способ развернуть / свернуть строки иерархической таблицы, используя 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-код может быть скорректирован при необходимости.
Спасибо за любые подсказки.