table实现简易手风琴格式

framic

于 2015-10-22 16:00:16 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/framic/article/details/49334713

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用jQuery实现表格中子行的展开与折叠功能，通过为父行添加点击事件，根据父行ID动态显示或隐藏相应的子行。

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

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('tr.parent').click(function(){   // 获取所谓的父行
  $(this).toggleClass("selected")
  .siblings('.child_'+this.id).toggle(); 
;
 });
});
</script>
<style type="text/css">
.selected{ background:rgb(231,240,249);}
}
</style>
</head>

<body>
<table border="1">
   <tr class="parent" id="01" >
        <td> 11</td><td> 11</td><td> 11</td>
   </tr>
   <tr class="child_01"  >
        <td> 22</td><td> 22</td><td> 22</td>
   </tr>
</table>
</body>
</html>