jQuery学习笔记(6)--复选框控制表格行高亮

浏览数：36 / 时间：2015年06月09日

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head runat="server">
  3     <title></title>
  4     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  5     <style type="text/css">
  6         table
  7         {
  8             width: 300px;
  9         }
 10         table, tr, th, td
 11         {
 12             border: 1px solid black;
 13             border-collapse: collapse;
 14         }
 15         
 16         td
 17         {
 18             text-align: center;
 19         }
 20         
 21         .even
 22         {
 23             background: #fff38f;
 24         }
 25         .odd
 26         {
 27             background: #ffffee;
 28         }
 29         
 30         .selected
 31         {
 32             background: lightgreen;
 33         }
 34     </style>
 35     <script type="text/javascript">
 36         $(function () {
 37             $("tbody>tr:odd").addClass("odd");
 38             $("tbody>tr:even").addClass("even");
 39 
 40                        //方法1
 41 //                        $("tbody>tr").click(function () {
 42 //                            if ($(this).hasClass("selected")) {
 43 //                                $(this).removeClass("selected").find(":checkbox").attr("checked", false);
 44 //                            }
 45 //                            else {
 46 //                                $(this).addClass("selected").find(":checkbox").attr("checked", true);
 47 //                            }
 48 
 49 //                        });
 50 
 51             //方法2
 52             $("tbody>tr").click(function () {
 53                 var hasSelected = $(this).hasClass("selected");
 54                 //三元运算符
 55                 $(this)[hasSelected ? "removeClass" : "addClass"]("selected")
 56                 .find(":checkbox").attr("checked", true);
 57             });
 58         });
 59     </script>
 60 </head>
 61 <body>
 62     <form id="form1" runat="server">
 63     <div>
 64         <table>
 65             <thead>
 66                 <tr>
 67                     <th>
 68                     </th>
 69                     <th>
 70                         姓名
 71                     </th>
 72                     <th>
 73                         性别
 74                     </th>
 75                     <th>
 76                         暂住地
 77                     </th>
 78                 </tr>
 79             </thead>
 80             <tbody>
 81                 <tr>
 82                     <td>
 83                         <input type="checkbox" />
 84                     </td>
 85                     <td>
 86                         王丹丹
 87                     </td>
 88                     <td>
 89                         女
 90                     </td>
 91                     <td>
 92                         杭州
 93                     </td>
 94                 </tr>
 95                 <tr>
 96                     <td>
 97                         <input type="checkbox" />
 98                     </td>
 99                     <td>
100                         刘莹莹
101                     </td>
102                     <td>
103                         女
104                     </td>
105                     <td>
106                         南京
107                     </td>
108                 </tr>
109                 <tr>
110                     <td>
111                         <input type="checkbox" />
112                     </td>
113                     <td>
114                         何晓晓
115                     </td>
116                     <td>
117                         女
118                     </td>
119                     <td>
120                         温哥华
121                     </td>
122                 </tr>
123                 <tr>
124                     <td>
125                         <input type="checkbox" />
126                     </td>
127                     <td>
128                         毛龙龙
129                     </td>
130                     <td>
131                         男
132                     </td>
133                     <td>
134                         铁岭
135                     </td>
136                 </tr>
137                 <tr>
138                     <td>
139                         <input type="checkbox" />
140                     </td>
141                     <td>
142                         张康
143                     </td>
144                     <td>
145                         男
146                     </td>
147                     <td>
148                         伦敦
149                     </td>
150                 </tr>
151                 <tr>
152                     <td>
153                         <input type="checkbox" />
154                     </td>
155                     <td>
156                         戴维斯
157                     </td>
158                     <td>
159                         男
160                     </td>
161                     <td>
162                         墨尔本
163                     </td>
164                 </tr>
165             </tbody>
166         </table>
167     </div>
168     </form>
169 </body>
170 </html>