今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>隔行换色</title><script src="js/jquery-1.4.2.min.js"></script><style type="text/css">body,table,td, {font-family:Arial, Helvetica, sans-serif;font-size:12px;}.h {background:#f3f3f3;color:#000;}.c {background:#ebebeb;color:#000;}</style></head><body><div id="aaa"><form><table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"><tr><td width="30" align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>蓝枫前端</td><td>蓝枫前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>蓝枫前端</td><td>蓝枫前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>蓝枫前端</td><td>蓝枫前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>蓝枫前端</td><td>蓝枫前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>蓝枫前端</td><td>蓝枫前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>蓝枫前端</td><td>蓝枫前端</td></tr><tr><td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td><td>蓝枫前端</td><td>蓝枫前端</td></tr></table></form></div><script> |
第一种比较复杂的方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(function(){$("#table tr").hover(function(){$(this).addClass("h");},function(){$(this).removeClass("h");})$("input").click(function(){if($(this).attr("checked")){$(this).closest("tr").addClass("c");}else{$(this).closest("tr").removeClass("c");}})}) |
第二种比较简单的方法：
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(function(){$("#table tr").hover(function(){$(this).toggleClass("h");})$("input").click(function(){var d = $(this);d.closest('tr').toggleClass("c",d.attr("checked")) ;})})</script></body></html> |
