表格隔行換色，有多種寫法，可以通過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
>
?
記錄下每天的積累，超越昨天的自己。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
