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

效果图:

posted on 2015-01-28 18:34  水语者9  阅读(164)  评论(0)  编辑  收藏  举报