- 科技
- 表格隔行变色
表格隔行变色
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<style
>
* {
margin
: 0;
padding
: 0;
}
table
{
width
: 80%;
text
-align
: center
;
margin
: 50px auto
;
border
: 1px solid #eee
;
border
-collapse
: collapse
;
}
th
,
td
{
border
: 1px solid #eee
;
padding
: 15px
;
}
.odd
{
background
-color
: lightblue
;
}
.even
{
background
-color
: lightgrey
;
}
</style
>
</head
>
<body
>
<table
>
<thead
>
<tr
>
<th
>编号
</th
>
<th
>姓名
</th
>
<th
>出生年月
</th
>
</tr
>
</thead
>
<tbody
>
<tr
>
<td
>001</td
>
<td
>李晓晓
</td
>
<td
>2002-12-20</td
>
</tr
>
<tr
>
<td
>001</td
>
<td
>李晓晓
</td
>
<td
>2002-12-20</td
>
</tr
>
<tr
>
<td
>001</td
>
<td
>李晓晓
</td
>
<td
>2002-12-20</td
>
</tr
>
<tr
>
<td
>001</td
>
<td
>李晓晓
</td
>
<td
>2002-12-20</td
>
</tr
>
<tr
>
<td
>001</td
>
<td
>李晓晓
</td
>
<td
>2002-12-20</td
>
</tr
>
<tr
>
<td
>001</td
>
<td
>李晓晓
</td
>
<td
>2002-12-20</td
>
</tr
>
<tr
>
<td
>001</td
>
<td
>李晓晓
</td
>
<td
>2002-12-20</td
>
</tr
>
<tr
>
<td
>001</td
>
<td
>李晓晓
</td
>
<td
>2002-12-20</td
>
</tr
>
</tbody
>
</table
>
<script
>
var trs
=document
.querySelectorAll('tbody tr')
console
.log(trs
);
for(var i
=0;i
<trs
.length
;i
++){
if(i
%2==0){
trs
[i
].className
='odd'
}else{
trs
[i
].className
='even'
}
trs
[i
].onmouseover=function(){
this.style
.backgroundColor
='#eee'
}
trs
[i
].onmouseout=function(){
this.style
.backgroundColor
=''
}
}
</script
>
</body
>
</html
>
Processed:
0.020, SQL:
8
