html Javascript collapse/expand Tabellenzeilen, untergeordnete Zeilen

Question

Ich möchte Tabellenzeilen komprimieren/erweitern, wenn ich auf Zeile klicke. Ich füge Zeilen und untergeordnete Zeilen dynamisch um javascript hinzu. Hier ist mein Screenshot

hier in Bild, das Sie mit zwei Tasten d.h Add rule and add comments sehen können. Wenn ich auf "Regel hinzufügen" klicke, füge ich es der übergeordneten Zeile hinzu. Wenn ich die übergeordnete Zeile auswähle und auf Kommentar hinzufügen klicke, wird die untergeordnete Zeile hinzugefügt.

Es gibt 5 Zeilen. Erste Zeile, d. H. cell in row 0 enthält drei untergeordnete Zeilen child row 0,child row 1,child row 2. Und in child row 2 enthält es eigene child row 3.

Hier javascript Code zum Einsturz/auszublenden Reihen

function GetSelectedRow(obj) 
{ 
    trID = obj.id; 
    var SelRow = document.getElementById(trID); 
    SelRow.setAttribute("bgcolor", "#808080"); 
    //return obj.id; 
    //alert(trID); 

    var children = getChildren($(obj)); 
    $.each(children, function() { 
     $(this).toggle(); 
    }) 
} 
//---------------- get all child element to collapse------------- 
function getChildren($row) { 
    var children = [], level = $row.attr('data-id'); 
    while ($row.next().attr('data-parent') == level) {   
     children.push($row.next()); 
     $row = $row.next(); 
    } 
    return children; 
} 

Wenn ich auf Zeile Mutter klicken heißt cell in row 0 es die Methode aufruft GetSelectedRow und kollabieren alle ist es ein Kinder Reihe (child row 0, child row 1, child row 2). Aber das Problem liegt in untergeordneten Zeilen (child row 3). Es kollabiert nicht. Siehe hier ist mein minimiertes Bild.

Hier in Bild können Sie sehen, ich erste Zeile ausgewählt haben, und sie alle Kind Reihe kollabieren, aber Problem in subchild. Wie kann ich alle Zeilen einschließlich child and sub child zusammenklappen?

EDIT Hier ist mein HTML-Code

<input type="button" onclick="AddRule()" value="Add Rule" /> 
<input type="button" onclick="AddComments()" value="Add Comments" /> 
<table id="myTable" class="collaptable"> 
    <thead> 
     <tr> 
      <th>Rule Discription 
      </th> 

      <th>Primary Module 
      </th> 

      <th>Model 
      </th> 

      <th>Shop Call Number 
      </th> 

      <th>EWR 
      </th> 

      <th>Suggested Rule Effective Date 
      </th> 

      <th>Rule Contents 
      </th> 

      <th>Reason 
      </th> 

      <th>Rule Note 
      </th> 

      <th>Level 
      </th> 

      <th>Children 
      </th> 
     </tr> 
    </thead> 
    <tbody id="mybody"> 
    </tbody> 
</table> 

jsFiddle Link-https://jsfiddle.net/18uxxnuc/

Aber ich immer bin nicht, warum es dort nicht funktioniert. Ich habe den gesamten Code dort hinzugefügt.

Ich denke, ich muss wie recursive Funktion verwenden.

EDIT

Ich versuchte jQuery-Plugin aCollapTable und github Ich habe diese Funktion in meiner AddComment Methode hinzugefügt. aber das Problem ist, fügt es +/- jedes Mal hinzu, wenn ich untergeordnete Zeile hinzufüge. Siehe JsFiddle Demo. Ich weiß nicht, warum das Plugin aCollapTable dort nicht funktioniert.

Answer 1

$(document).on('click','tr',function(){ 
 

 
$(this).slideToggle() 
 

 
})