使用JS在HTML中创建可折叠行
[英]Creating collapsible rows in HTML using JS
问题描述
I am trying to create a table with collapsible rows in HTML using JS but its simply not working. 
我正在尝试使用JS在HTML中创建带有可折叠行的表，但是它根本无法正常工作。 Nothing happens when I click on the row with the class header1 Here's the code I've written: 当我单击带有类header1的行时，什么也没有发生。这是我编写的代码：
<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 个解决方案
解决方案1
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. 我在w3schools编辑器中尝试了此代码，效果很好。 Added the jQuery reference . 添加了jQuery参考。
解决方案2
0 已采纳 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. 将其更改为“ 100”延迟。 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". 它将切换所有带有“数据”类的标签。
解决方案3
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. 如果将表格行的高度设置为静态高度，则slideToggle更加可见，但不如在div上那样平滑。 See the attached jsFiddle ( and hat tip to this post that showed me the way ): 请参阅随附的jsFiddle（ 以及向我展示方法的这篇文章的技巧提示 ）：
$('.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.