Creating collapsible rows in HTML using JS
Question
I am trying to create a table with collapsible rows in HTML using JS but its simply not working. Nothing happens when I click on the row with the class header1 Here's the code I've written:
<html>
<body>
<table>
<tr style="background-color: darkcyan;">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr class="header1">
<td colspan="5">Header Row</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<script>
$('.header1').click(function(){
$(this).nextUntil('tr.header1').slideToggle(1000);
});
</script>
</body>
</html>
Can someone tell me if I'm doing anything wrong?
3 answers
solution1
0 2016-12-15 11:08:47
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.header1').click(function(){
$(this).nextUntil('tr.header1').slideToggle(10);
});
});
</script>
</head>
<body>
<table>
<tr style="background-color: darkcyan;">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr class="header1">
<td colspan="5">Header Row</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
I tried this code in w3schools editor it worked fine. Added the jQuery reference .
solution2
0 ACCPTED 2016-12-15 11:08:57
$('.header1').click(function(){ $('.data').slideToggle(100); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <body> <table> <tr style="background-color: darkcyan;"> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> <tr class="header1"> <td colspan="5">Header Row</td> </tr> <tr class="data"> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr class="data"> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> </body>
Even your code is working. change it to '100' delay. why don't you give another class called 'data' in tag where data are present.
<tr class="data">
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
then try this.
$('.header1').click(function(){
$('.data').slideToggle(100);
});
it will toggle all tags with class "data".
solution3
0 2016-12-15 11:11:37
If you give a static height to your table rows the slideToggle is much more visible, but not quite as smooth as if you did it on a div. See the attached jsFiddle ( and hat tip to this post that showed me the way ):
$('.header1').click(function(){ $(this).nextUntil('tr.header1').slideToggle('fast'); });
table tr td { border: 1px solid aqua; } table tr { height: 100px; } tr.header1 { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <html> <head> </head> <body> <table> <tr style="background-color: darkcyan;"> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> <tr class="header1"> <td colspan="5">Header Row</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.