Ich suche nach einer effizienten Möglichkeit, hierarchische Tabellenzeilen mithilfe von jQuery zu erweitern / zu reduzieren. Das Problem ist, dass die Funktionen zum Erweitern und Reduzieren unterschiedlich sind.

Anfänglich nur Zeilen mit der Klasselevel_0 werden angezeigt, alle anderen Zeilen werden ausgeblendet.expand sollte nur das @ anzeigNächste level, also auf row @ klickid=10 sollte nur Zeilen mit @ machid=11 undid=14 sichtbar.collapse auf der anderen Seite sollte zusammenbrechenall aufeinanderfolgende Zeilen mit einer tieferen Ebene als die aktuelle. Klicken Sie beispielsweise auf Zeile reduzierenid=10 sollte Zeilen mit IDs verstecken11, 12, 13, 14, wenn sie sichtbar sind.

Die Tabellendaten sehen wie folgt aus:

<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>

Meine nicht funktionierende Lösung:

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

Das Problem ist, dass nur die Zeilen der nächsten Ebene ausgeblendet werden. Sichtbare und tiefere Zeilen unterhalb der angeklickten Zeile werden weiterhin angezeigt.

Kann mir jemand Tipps geben, wie ich das effizient machen kann? Der HTML-Code kann bei Bedarf angepasst werden.

Vielen Dank für alle Hinweise.