jQuery学习笔记(7)--表格展开关闭

  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>
View Code

效果图:

jQuery学习笔记(7)--表格展开关闭

你可能感兴趣的:(jquery)