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

Question

伙计们，我是jQuery的新手。我要使表中的子行隐藏，并在单击父行中的链接时显示。我曾尝试使用jQuery切换，但我不知道如何在有多行时使其工作。

这是表格 -

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

我不确定jQuery切换是否对此有好处。任何帮助，将不胜感激。感谢。

Answer 1

您可以使用closest()和nextUntil()方法以及:has()伪选择器执行此操作，如下所示。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;