1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <style type="text/css"> 5 table 6 { 7 width: 300px; 8 } 9 10 table, thead 11 { 12 border: 1px solid black; 13 border-collapse: collapse; 14 } 15 16 .parent 17 { 18 background: lightgreen; 19 } 20 21 .selected 22 { 23 background: #fff38f; 24 } 25 </style> 26 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 27 <script type="text/javascript"> 28 $(function () { 29 30 $("tr.parent").click(function () { 31 $(this).toggleClass("selected").siblings(".child_" + this.id).toggle(); 32 }); 33 34 //$("tr:contains('康')").addClass("selected");//这个也可以放开看看哦 35 36 //$("table tbody tr").hide().filter(":contains('康')").show().addClass("selected");//这个也可以放开看看哦 37 38 }); 39 </script> 40 41 </head> 42 <body> 43 <form id="form1" runat="server"> 44 <div> 45 <table> 46 <thead> 47 <tr> 48 <th> 49 姓名 50 </th> 51 <th> 52 性别 53 </th> 54 <th> 55 暂住地 56 </th> 57 </tr> 58 </thead> 59 <tbody> 60 <tr class="parent" id="row_01"> 61 <td colspan="3"> 62 前台设计组 63 </td> 64 </tr> 65 <tr class="child_row_01"> 66 <td> 67 王丹丹 68 </td> 69 <td> 70 女 71 </td> 72 <td> 73 杭州 74 </td> 75 </tr> 76 <tr class="child_row_01"> 77 <td> 78 刘莹莹 79 </td> 80 <td> 81 女 82 </td> 83 <td> 84 南京 85 </td> 86 </tr> 87 <tr class="parent" id="row_02"> 88 <td colspan="3"> 89 前台开发组 90 </td> 91 </tr> 92 <tr class="child_row_02"> 93 <td> 94 何晓晓 95 </td> 96 <td> 97 女 98 </td> 99 <td> 100 温哥华 101 </td> 102 </tr> 103 <tr class="child_row_02"> 104 <td> 105 毛龙龙 106 </td> 107 <td> 108 男 109 </td> 110 <td> 111 铁岭 112 </td> 113 </tr> 114 <tr class="parent" id="row_03"> 115 <td colspan="3"> 116 后台开发组 117 </td> 118 </tr> 119 <tr class="child_row_03"> 120 <td> 121 张康 122 </td> 123 <td> 124 男 125 </td> 126 <td> 127 伦敦 128 </td> 129 </tr> 130 <tr class="child_row_03"> 131 <td> 132 戴维斯 133 </td> 134 <td> 135 男 136 </td> 137 <td> 138 墨尔本 139 </td> 140 </tr> 141 </tbody> 142 </table> 143 </div> 144 </form> 145 </body> 146 </html>
效果图:
