javascript - hide child element with dynamic bootstrap table -
i'm using dynamic table example found here (bootply). table parent, child relationship, can click on row , drop down row. added 1 more level example, can think of example parent, child, grandchild relationship. issue if go 2 levels deep, , click parent row hides child row, not grandchild rows. need fix 'bug' somehow.. i've tried wrapping parent row in div , using href="#collapse1" , putting id on grandchild row doesn't work. other suggestions appreciated. here's html..
<table class="table table-responsive table-hover"> <thead> <tr><th>column</th><th>column</th><th>column</th><th>column</th></tr> </thead> <tbody> <tr class="clickable" data-toggle="collapse" id="row1" data-target=".row1"> <td><i class="glyphicon glyphicon-plus"></i></td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="collapse row1"> <td>- child row</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="clickable collapse row1" data-toggle="collapse" id="row3" data-target=".row3"> <td>- child row</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="collapse row3"> <td>- grandchild row</td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="clickable" data-toggle="collapse" id="row2" data-target=".row2"> <td><i class="glyphicon glyphicon-plus"></i></td> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="collapse row2"> <td>- child row</td> <td>data 2</td> <td>data 2</td> <td>data 2</td> </tr> <tr class="collapse row2"> <td>- child row</td> <td>data 2</td> <td>data 2</td> <td>data 2</td> </tr> </tbody> </table>
doesn't work fiddle.js reason.. if go link , copy&paste code can replicate issue.
Comments
Post a Comment