<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .table1 { border:0; border-collapse:collapse; } .table1 td { font:normal 12px/17px Arial; padding:2px; width:100px; } .table1 th { font:bold 12px/17px Arial; text-align:left; padding:4px; border-bottom:1px solid #333; width:100px; } .parent { background:#FFF38F; cursor:pointer; } /* 偶数行样式*/ .odd { background:#FFFFEE; } /* 奇数行样式*/ .selected { background:#FF6500; color:#fff; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('.table1 tr.parent').click(function(){ // 获取所谓的父行 $(this) .toggleClass("selected") // 添加/删除高亮 .siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行 }).click(); }) </script> </head> <body> <table class="table1"> <thead> <tr> <th>姓名</th> <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> <td>浙江宁波</td> </tr> <tr class="child_row_01"> <td>李四</td> <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> <td>湖南长沙</td> </tr> <tr class="child_row_02"> <td>找六</td> <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> <td>浙江杭州</td> </tr> <tr class="child_row_03"> <td>MAXMAN</td> <td>女</td> <td>浙江杭州</td> </tr> </tbody> </table> </body> </html>