jquery学习笔记(4)--实现table隔行变色以及单选框选中

  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, th, tr, td

 11         {

 12             border: 1px solid black;

 13             border-collapse: collapse;

 14             padding: 3px;

 15         }

 16         

 17         td

 18         {

 19             vertical-align: middle;

 20             text-align: center;

 21         }

 22         

 23         .even

 24         {

 25             background: #fff38f;

 26         }

 27         .odd

 28         {

 29             background: #ffffee;

 30         }

 31         .selected

 32         {

 33             background: lightgreen;

 34         }

 35     </style>

 36     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

 37     <script type="text/javascript">

 38 

 39         $(function () {

 40             $("tbody>tr:odd").addClass("odd"); /*给奇数行添加样式*/

 41             $("tbody>tr:even").addClass("even"); /*给偶数行添加样式*/

 42 

 43             //将某一行加高亮

 44             //$("tr:contains('刘虹')").addClass("selected");

 45 

 46             //选中某行加高亮

 47             $("tbody>tr").click(function () {

 48                 $(this).addClass("selected")

 49                        .siblings().removeClass("selected") //去掉兄弟行的样式

 50                        .end() //返回到当前对象

 51                        .find(":radio").attr("checked", true)

 52                        .parent().parent()

 53                        .siblings().find(":radio").attr("checked", false);

 54 

 55             });

 56 

 57         });

 58     

 59     

 60     </script>

 61 </head>

 62 <body>

 63     <form id="form1" runat="server">

 64     <div>

 65         <table>

 66             <thead>

 67                 <tr>

 68                     <th>

 69                     </th>

 70                     <th>

 71                         姓名

 72                     </th>

 73                     <th>

 74                         性别

 75                     </th>

 76                     <th>

 77                         暂住地

 78                     </th>

 79                 </tr>

 80             </thead>

 81             <tbody>

 82                 <tr>

 83                     <td>

 84                         <input type="radio" />

 85                     </td>

 86                     <td>

 87                         何龙龙

 88                     </td>

 89                     <td>

 90  91                     </td>

 92                     <td>

 93                         苏州

 94                     </td>

 95                 </tr>

 96                 <tr>

 97                     <td>

 98                         <input type="radio" />

 99                     </td>

100                     <td>

101                         王龙

102                     </td>

103                     <td>

104 105                     </td>

106                     <td>

107                         南京

108                     </td>

109                 </tr>

110                 <tr>

111                     <td>

112                         <input type="radio" />

113                     </td>

114                     <td>

115                         刘虹

116                     </td>

117                     <td>

118 119                     </td>

120                     <td>

121                         天津

122                     </td>

123                 </tr>

124                 <tr>

125                     <td>

126                         <input type="radio" />

127                     </td>

128                     <td>

129                         张晓丹

130                     </td>

131                     <td>

132 133                     </td>

134                     <td>

135                         圣地亚哥

136                     </td>

137                 </tr>

138                 <tr>

139                     <td>

140                         <input type="radio" />

141                     </td>

142                     <td>

143                         Dannis

144                     </td>

145                     <td>

146 147                     </td>

148                     <td>

149                         Washionton

150                     </td>

151                 </tr>

152                 <tr>

153                     <td>

154                         <input type="radio" />

155                     </td>

156                     <td>

157                         何以琛

158                     </td>

159                     <td>

160 161                     </td>

162                     <td>

163                         大阪

164                     </td>

165                 </tr>

166             </tbody>

167         </table>

168     </div>

169     </form>

170 </body>

171 </html>
View Code

效果图:
jquery学习笔记(4)--实现table隔行变色以及单选框选中

 

你可能感兴趣的:(jquery)