动态操作table (收起，放下)例子

taking_wang

于 2012-12-06 21:36:40 发布

阅读量939

点赞数

CC 4.0 BY-SA版权

分类专栏：前台 web_jquery

本文链接：https://blog.youkuaiyun.com/taking_wang/article/details/8267129

前台 web_jquery 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的表格行展开和收起效果，通过点击带有特定标识的行来显示或隐藏对应的子行内容，并且为包含指定文本的行添加了特殊的样式。

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

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
  .selected{background-color:#FFFFCA;}
  .containClass{background-color:red;}
</style>
<script type="text/javascript">
$(document).ready(function()  {
  $("tr[flag='parent']").click(function(){
   $(this).toggleClass("selected").siblings(".child"+$(this).attr("id")).toggle();
});

//将含有内容为“第一组”的tr添加样式containClass
 $("tr:contains('第一组')").addClass("containClass");
});
</script>
</head>
<body>

<table border='1'>
  <tr> 
    <th>组</th>
<th>名字</th>
<th>创建时间</th>
  </tr>
<tr flag="parent" id="01">
  <td>第一组</td>
  <td>love</td>
  <td>2012-11-1</td>
</tr>
<tr class="child01">
  <td>test1</td>
  <td>love</td>
  <td>2012-11-1</td>
</tr>
<tr class="child01">
  <td>test2</td>
  <td>love</td>
  <td>2012-11-1</td>
</tr>
<tr flag="parent" id="02">
  <td>第二组</td>
  <td>love</td>
  <td>2012-11-1</td>
</tr>
<tr class="child02">
  <td>test1</td>
  <td>love</td>
  <td>2012-11-1</td>
</tr>
<tr class="child02">
  <td>test2</td>
  <td>love</td>
  <td>2012-11-1</td>
</tr>
</table>
</body>
</html>