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.
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.
Share Improve this question asked May 9, 2016 at 8:07 Sagar RajSagar Raj 9394 gold badges14 silver badges34 bronze badges1 Answer
Reset to default 5You 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./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>