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

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

效果图:

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

你可能感兴趣的:(jquery)