用Jquery简单实现表格的展开与折叠
作为程序员，天天都在编程与学习。好的东西简洁的代码与大家一同分享......大家多多指教......共同进步!
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>展开与折叠表格</title> 6 7 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> 8 <script type="text/javascript"> 9 $(function () { 10 11 //展开与折叠表格 12 $("tr.parent").css("cursor","pointer")//添加一个样式 13 .click(function () {//得到所在的那行表格并添加单击事件 14 $(this).toggleClass("selected")//添加/删除高亮 15 .siblings(".child_" + this.id).toggle(); //隐藏/显示所谓的子行 16 }).click(); 17 }); 18 19 </script> 20 21 <style type="text/css"> 22 table 23 { 24 border:solid 1px red; 25 border-collapse:collapse; 26 margin:0 auto; 27 } 28 td 29 { 30 font:12px/17px Arial; 31 padding:2px; 32 width:100px; 33 } 34 th 35 { 36 font:bold 12px/17px Arial; 37 text-align:left; 38 padding:4px; 39 border-bottom:1px solid #333; 40 } 41 .selected 42 { 43 background:#FF6500; 44 color:#FFF; 45 } 46 47 </style> 48 </head> 49 <body> 50 <table> 51 <thead> 52 <tr> 53 <th>姓名</th> 54 <th>性别</th> 55 <th>暂住地</th> 56 </tr> 57 </thead> 58 59 <tbody> 60 <tr class="parent" id="row_01"> 61 <td colspan="3">前台设计组</td> 62 </tr> 63 <tr class="child_row_01"> 64 <td>张三</td><td>男</td><td>重庆江北</td> 65 </tr> 66 <tr class="child_row_01"> 67 <td>小红</td><td>女</td><td>重庆沙坪坝</td> 68 </tr> 69 <tr class="parent" id="row_02"> 70 <td colspan="3">后台工作组</td> 71 </tr> 72 <tr class="child_row_02"> 73 <td>比干</td><td>男</td><td>重庆江北</td> 74 </tr> 75 <tr class="child_row_02"> 76 <td>小张</td><td>女</td><td>重庆沙坪坝</td> 77 </tr> 78 <tr class="parent" id="row_03"> 79 <td colspan="3">数据库设计组</td> 80 </tr> 81 <tr class="child_row_03"> 82 <td>田亮</td><td>男</td><td>重庆江北</td> 83 </tr> 84 <tr class="child_row_03"> 85 <td>小红</td><td>女</td><td>重庆沙坪坝</td> 86 </tr> 87 </tbody> 88 89 </table> 90 </body> 91 </html>
