table 布局用slideToggle()展开和隐藏

最新推荐文章于 2023-06-28 10:40:36 发布

素年槿夏

最新推荐文章于 2023-06-28 10:40:36 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： C# asp.net asp.net mvc

本文链接：https://blog.youkuaiyun.com/shan1774965666/article/details/52065186

C# 同时被 3 个专栏收录

168 篇文章

订阅专栏

asp.net mvc

69 篇文章

订阅专栏

asp.net

63 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的表格行展开与隐藏效果的方法。通过点击带有'parent'类别的行，可以展开或隐藏其对应的子行。该方法利用了jQuery的slideToggle方法来实现平滑的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//展开、隐藏代码
$(function(){
$("tr.parent").click(function() {
$(this).toggleClass('selected');
$(this).siblings('.child_' + this.id).slideToggle();
});
})
</script>

<table>
<thead>
<tr><th>姓名</th><th>性别</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">设计组</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td></tr>

<tr class="parent" id="row_02"><td colspan="3">美术组</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td></tr>
<tr class="child_row_02"><td>找六</td><td>男</td></tr>

<tr class="parent" id="row_03"><td colspan="3">开发组</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td></tr>
</tbody>
</table>