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>
效果图:
时间： 2024-10-06 04:05:15