html javascriptの折りたたみ/展開テーブルの行、子の行

Question

行をクリックすると表の行を折りたたんだり展開したりしたい。私は行と子の行を動的にjavascriptで追加しています。ここに私のスクリーンショットは、ここでは、2ボタンすなわちAdd rule and add commentsを見ることができる画像で

です。追加ルールをクリックすると、親行に追加されます。親行を選択してコメントを追加すると、子行が追加されます。

5行あります。最初の行、すなわちcell in row 0には、3つの子ローchild row 0,child row 1,child row 2が含まれています。そしてchild row 2にはそれ自身のchild row 3が含まれています。私はそれが法GetSelectedRow呼び出し、そのすべての子行（child row 0, child row 1, child row 2）を崩壊親行に、すなわちcell in row 0をクリックする/非表示の行

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

を折りたたむためにここに

javascriptコード。しかし、問題は子サブ行（child row 3）にあります。それは崩壊していません。ここで私の崩壊したイメージを参照してください。ここでは、私が最初の行を選択していると、それはsubchild内のすべての子行が、問題を折りたたみできる画像で

。 child and sub childを含むすべての行を折りたたむにはどうすればよいですか？

EDIT は、ここに私のhtmlコード

<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リンクhttps://jsfiddle.net/18uxxnuc/

である。しかし、それはそこに働いていない理由を私は得ていないのです。私はそこにすべてのコードを追加しました。

私はrecursiveのように使用しなければならないと思います。

EDIT

は、私は私でaddComment方法でこの機能を追加したjQueryプラグインaCollapTableとgithubを試してみました。問題は、子供の行を追加するたびに+/-を追加することです。デモJsFiddleをご覧ください。このプラグインaCollapTableがなぜ動作しないのか分かりません。

Answer 1

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

 
$(this).slideToggle() 
 

 
})