作為程序員，天天都在編程與學習。好的東西簡潔的代碼與大家一同分享......大家多多指教......共同進步!
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>