表格隔行换色，有多种写法，可以通过jquery来写，也可以用css3实现。
1.jquery方法
odd,奇数；even，偶数
方法很简单
$("tr:odd").css({background:"#c66",color:"#fff"});
$('tr:even').css({background:"#fff",color:"#333"});
但是如果删除后，两个一样背景的tr会挨上，怎么解决呢？可以将换行写到一个方法里，在删除事件中，调用换行方法，代码如下：
1
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
http-equiv
="content-type"
content
="text/html charset=utf-8"
/>
5
<
title
>
模拟滚动条
title
>
6
head
>
7
<
style
type
="text/css"
>
8
*
{
padding
:
0
;
margin
:
0
;
border
:
0
;
}
9
table
{
width
:
600px
;
margin
:
20px auto
;
border
:
1px solid #c66
;
border-collapse
:
collapse
;
}
10
tr
{
text-align
:
center
;
height
:
30px
;
border
:
0
;
}
11
12
style
>
13
<
body
>
14
<
table
border
="0"
>
15
<
thead
>
16
<
th
>
姓名
th
>
17
<
th
>
年龄
th
>
18
<
th
>
昵称
th
>
19
<
th
>
工作
th
>
20
<
th
>
操作
th
>
21
thead
>
22
<
tbody
>
23
<
tr
>
24
<
td
>
silence
td
>
25
<
td
>
20
td
>
26
<
td
>
ss
td
>
27
<
td
>
web
td
>
28
<
td
><
a
href
="#"
>
删除
a
>
td
>
29
tr
>
30
<
tr
>
31
<
td
>
seraph
td
>
32
<
td
>
21
td
>
33
<
td
>
se
td
>
34
<
td
>
web
td
>
35
<
td
><
a
href
="#"
>
删除
a
>
td
>
36
tr
>
37
<
tr
>
38
<
td
>
rain
td
>
39
<
td
>
22
td
>
40
<
td
>
rr
td
>
41
<
td
>
java
td
>
42
<
td
><
a
href
="#"
>
删除
a
>
td
>
43
tr
>
44
<
tr
>
45
<
td
>
snow
td
>
46
<
td
>
21
td
>
47
<
td
>
sn
td
>
48
<
td
>
asp
td
>
49
<
td
><
a
href
="#"
>
删除
a
>
td
>
50
tr
>
51
<
tr
>
52
<
td
>
cloud
td
>
53
<
td
>
18
td
>
54
<
td
>
cc
td
>
55
<
td
>
web
td
>
56
<
td
><
a
href
="#"
>
删除
a
>
td
>
57
tr
>
58
<
tr
>
59
<
td
>
winter
td
>
60
<
td
>
25
td
>
61
<
td
>
win
td
>
62
<
td
>
jsp
td
>
63
<
td
><
a
href
="#"
>
删除
a
>
td
>
64
tr
>
65
tbody
>
66
table
>
67
<
script
src
="jquery-1.8.3.min.js"
>
script
>
68
<
script
type
="text/Javascript"
>
69
function
changeColor(){
70
$(
"
tr:odd
"
).css({background:
"
#c66
"
,color:
"
#fff
"
});
71
$(
'
tr:even
'
).css({background:
"
#fff
"
,color:
"
#333
"
});
72
};
73
var
color;
74
$(
"
tr
"
).hover(
function
(){
75
color
=
$(
this
).css(
'
background-color
'
);
76
$(
this
).css(
'
background
'
,
'
#ccc
'
);
77
},
function
(){
78
$(
this
).css(
'
background
'
,color);
79
})
80
$(
'
tr td a
'
).live(
'
click
'
,
function
(e){
81
82
$(
this
).parent().parent().remove();
83
changeColor();
84
});
85
$(
function
(){
86
changeColor();
87
})
88
89
script
>
90
body
>
91
html
>
2.css3方法
用到nth-of-type方法，nth-of-type(n)选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素.
具体代码如下：
1
doctype html
>
2
<
html
>
3
<
head
>
4
<
meta
http-equiv
="content-type"
content
="text/html charset=utf-8"
/>
5
<
title
>
模拟滚动条
title
>
6
head
>
7
<
style
type
="text/css"
>
8
*
{
padding
:
0
;
margin
:
0
;
border
:
0
;
}
9
table
{
width
:
600px
;
margin
:
20px auto
;
border
:
1px solid #c66
;
border-collapse
:
collapse
;
}
10
tr
{
text-align
:
center
;
height
:
30px
;
border
:
0
;
}
11
tbody tr:nth-of-type(odd)
{
background
:
#c66
;
color
:
#fff
;
}
12
tbody tr:nth-of-type(even)
{
background
:
#fff
;
color
:
#333
;
}
13
style
>
14
<
body
>
15
<
table
border
="0"
>
16
<
thead
>
17
<
th
>
姓名
th
>
18
<
th
>
年龄
th
>
19
<
th
>
昵称
th
>
20
<
th
>
工作
th
>
21
<
th
>
操作
th
>
22
thead
>
23
<
tbody
>
24
<
tr
>
25
<
td
>
silence
td
>
26
<
td
>
20
td
>
27
<
td
>
ss
td
>
28
<
td
>
web
td
>
29
<
td
><
a
href
="#"
>
删除
a
>
td
>
30
tr
>
31
<
tr
>
32
<
td
>
seraph
td
>
33
<
td
>
21
td
>
34
<
td
>
se
td
>
35
<
td
>
web
td
>
36
<
td
><
a
href
="#"
>
删除
a
>
td
>
37
tr
>
38
<
tr
>
39
<
td
>
rain
td
>
40
<
td
>
22
td
>
41
<
td
>
rr
td
>
42
<
td
>
java
td
>
43
<
td
><
a
href
="#"
>
删除
a
>
td
>
44
tr
>
45
<
tr
>
46
<
td
>
snow
td
>
47
<
td
>
21
td
>
48
<
td
>
sn
td
>
49
<
td
>
asp
td
>
50
<
td
><
a
href
="#"
>
删除
a
>
td
>
51
tr
>
52
<
tr
>
53
<
td
>
cloud
td
>
54
<
td
>
18
td
>
55
<
td
>
cc
td
>
56
<
td
>
web
td
>
57
<
td
><
a
href
="#"
>
删除
a
>
td
>
58
tr
>
59
<
tr
>
60
<
td
>
winter
td
>
61
<
td
>
25
td
>
62
<
td
>
win
td
>
63
<
td
>
jsp
td
>
64
<
td
><
a
href
="#"
>
删除
a
>
td
>
65
tr
>
66
tbody
>
67
table
>
68
<
script
src
="jquery-1.8.3.min.js"
>
script
>
69
<
script
type
="text/Javascript"
>
70
var
color;
71
$(
"
tr
"
).hover(
function
(){
72
color
=
$(
this
).css(
'
background-color
'
);
73
$(
this
).css(
'
background
'
,
'
#ccc
'
);
74
},
function
(){
75
$(
this
).css(
'
background
'
,color);
76
})
77
$(
'
tr td a
'
).live(
'
click
'
,
function
(e){
78
$(
this
).parent().parent().remove();
79
$(
'
tbody tr:nth-of-type(odd)
'
).css({background:
'
#c66
'
,color:
'
#fff
'
});
80
$(
'
tbody tr:nth-of-type(even)
'
).css({background:
'
#fff
'
,color:
'
#333
'
});
81
});
82
script
>
83
body
>
84
html
>
记录下每天的积累，超越昨天的自己。
表格隔行换色及删除后仍隔行换色效果（好别扭的标题。。。）
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 