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
效果图：