javascript - Assistance grouping nested html table via jquery -
basically have html table 3 layers of expand/collapse functionality. seeking achieve have layers expand/collapse underneath parents instead of right, become downward slope once expanded. here jsfiddle:
https://jsfiddle.net/htflmekl/1/
//expand collapse based on parent class column 1 $(document).ready(function() { $('.parent').prepend('-'); $('.parent').on('click', function() { if ($(this).text().indexof('-') != -1) { var str0 = $(this).text().replace(/-/g, '+'); $(this).text(str0); } else { var str = $(this).text().replace(/\+/g, '-'); $(this).text(str); } var $row = $(this).parent(); var rowspan = +$(this).attr('rowspan') || 4; $.merge($row, $row.nextall()).slice(0, rowspan).find('.alliance').toggle(); $.merge($row, $row.nextall()).slice(0, rowspan).find('.race').toggle(); $.merge($row, $row.nextall()).slice(0, rowspan).find('.role').toggle(); $.merge($row, $row.nextall()).slice(0, rowspan).find('.resource').toggle(); $.merge($row, $row.nextall()).slice(0, rowspan).find('.weapon').toggle(); $.merge($row, $row.nextall()).slice(0, rowspan).find('.price').toggle(); }); });
created ... though have tweak css lot perfect. hope helps...
<style> .tftable { font-size: 12px; color: #333333; width: 100%; border-width: 1px; border-color: #729ea5; border-collapse: collapse; } .tftable th { font-size: 12px; background-color: #acc8cc; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5; text-align: left; } .tftable tr { background-color: #d4e3e5; } .tftable td { font-size: 12px; border-width: 1px; padding: 8px; border-style: solid; border-color: #729ea5; } .tftable tr:hover { background-color: #ffffff; } .race { width: 50px; } </style> </head> <body> <table class="tftable" border="1"> <tr> <th>group</th> </tr> <tr> <th><a onclick="javascript:togglediv(this,'grp1child1');"> - </a>group 1 <table id="grp1child1" class="tftable" border="1"> <tr> <th>alliance : <a onclick="javascript:togglediv(this,'grp1child2');"> - </a>good</th> </tr> <tr> <td > <table id="grp1child2" class="tftable" border="1"> <tr> <th class="race">race: </th> <th><a onclick="javascript:togglediv(this,'grp1child3');" > - </a>humans</th> <th><a onclick="javascript:togglediv(this,'grp1child4');"> - </a>elves</th> </tr> <tr> <td> </td> <td> <table id="grp1child3" class="tftable" border="1"> <tr> <th colspan="3"> </th> <th>price</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </td> <td> <table id="grp1child4" class="tftable" border="1"> <tr> <th colspan="3"> </th> <th>price</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </th> </tr> <tr> <th><a onclick="javascript:togglediv(this,'grp2child1');"> - </a>group 2 <table id="grp2child1" class="tftable" border="1"> <tr> <th >alliance : <a onclick="javascript:togglediv(this,'grp2child2');"> - </a>evil</th> </tr> <tr> <td> <table id="grp2child2" style="width : 100%"> <tr> <th class="race">race: </th> <th><a onclick="javascript:togglediv(this,'grp2child3');" > - </a>trolls</th> <th><a onclick="javascript:togglediv(this,'grp2child4');"> - </a>ogres</th> </tr> <tr> <td> </td> <td> <table id="grp2child3" class="tftable" border="1"> <tr> <th colspan="3"> </th> <th>price</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </td> <td> <table id="grp2child4" class="tftable" border="1"> <tr> <th colspan="3"> </th> <th>price</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </th> </tr> </table> <script> function togglediv(linkobj,divid) { linkobj.innerhtml = (linkobj.innerhtml === ' - ') ? ' + ' : ' - ' ; $("#"+divid).toggle(); } </script> 