单击表的父行中的链接时，展开和折叠子行

Question

Guys i'm a newbie to jQuery. I've to make the child rows in a table to hide and show on click of a link in the parent row. I've tried to use jQuery toggle, but i dont know how to make it work when there are multiple rows.

Here's the table -

<table class="table table-striped reportTable">
     <thead>
          <tr>
              <th>Product Type</th>
              <th>Product Name</th>
              <th>Face Value</th>
              <th>My Stock</th>
              <th>Ordered Stock</th>
              <th>Sub Account Stock</th>
          </tr>
     </thead>
     <tbody>
          <tr>
               <td><a class="showhr" href="#">SIM</a></td>
               <td></td>
               <td></td>
               <td>574,888</td>
               <td>0</td>
               <td>0</td>
          </tr>
          <tr class="aser"> <!--child row-->
               <td></td>
               <td>EPin £5</td>
               <td>£05</td>
               <td></td>
               <td></td>
               <td></td>
           </tr>
           <tr class="aser"> <!--child row-->
               <td></td>
               <td>EPin £10</td>
               <td>£15</td>
               <td></td>
               <td></td>
               <td></td>
           </tr>
           <tr>
               <td><a class="showhr" href="#">SIM</a></td>
               <td></td>
               <td></td>
               <td>574,888</td>
               <td>0</td>
               <td>0</td>
          </tr>
          <tr class="aser"> <!--child row-->
               <td></td>
               <td>EPin £5</td>
               <td>£05</td>
               <td></td>
               <td></td>
               <td></td>
           </tr>
           <tr class="aser"> <!--child row-->
               <td></td>
               <td>EPin £10</td>
               <td>£15</td>
               <td></td>
               <td></td>
               <td></td>
           </tr>
      </tbody>
</table>

jQuery -

<script type="text/javascript">
     $(document).ready(function () { 
        $(".showhr").click(function () {
           $(".aser").toggle("slow", function () {                
           });
        });
    })
</script>

I'm not sure if jQuery toggle is a good idea for this. Any help would be appreciated. Thanks.

Answer 1

You can do it using closest() and nextUntil() methods and :has() pseudo selector like following.

 $(".showhr").click(function() { $(this).closest('tr').nextUntil("tr:has(.showhr)").toggle("slow", function() {}); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-striped reportTable"> <thead> <tr> <th>Product Type</th> <th>Product Name</th> <th>Face Value</th> <th>My Stock</th> <th>Ordered Stock</th> <th>Sub Account Stock</th> </tr> </thead> <tbody> <tr> <td><a class="showhr" href="#">SIM</a></td> <td></td> <td></td> <td>574,888</td> <td>0</td> <td>0</td> </tr> <tr class="aser"> <!--child row--> <td></td> <td>EPin £5</td> <td>£05</td> <td></td> <td></td> <td></td> </tr> <tr class="aser"> <!--child row--> <td></td> <td>EPin £10</td> <td>£15</td> <td></td> <td></td> <td></td> </tr> <tr> <td><a class="showhr" href="#">SIM</a></td> <td></td> <td></td> <td>574,888</td> <td>0</td> <td>0</td> </tr> <tr class="aser"> <!--child row--> <td></td> <td>EPin £5</td> <td>£05</td> <td></td> <td></td> <td></td> </tr> <tr class="aser"> <!--child row--> <td></td> <td>EPin £10</td> <td>£15</td> <td></td> <td></td> <td></td> </tr> </tbody> </table>