[英]Expand and collapse child row on click of a link in the parent row of a table
伙计们,我是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切换是否是个好主意。 任何帮助,将不胜感激。 谢谢。
您可以使用nextUntil()
closest()
和nextUntil()
方法以及:has()
伪选择器来完成此操作,如下所示。
$(".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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.