<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0;
}
.active{
border:1px solid red;
width:100px;
height:50px;
}
div{
width:900px;
height:350px;
margin-top: 100px;
margin-left:200px;
}
table,td{
border:1px solid black;
}
td{
width:200px;
height:30px;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<div>
<table id='sheet' >
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>王尔</td>
<td>34</td>
</tr>
<tr>
<td>4</td>
<td>ddd尔</td>
<td>34</td>
</tr>
</tbody>
</table>
</div>
<script>
window.onload=function(){
//隔行变色
//容易忘掉tBodies
var tab=document.getElementById('sheet');
var oldColor;
for(var i=0;i<tab.tBodies[0].rows.length;i++){
if(i%2==0){
tab.tBodies[0].rows[i].style.background="yellow";
}else{
tab.tBodies[0].rows[i].style.background="#fff";
}
//鼠标移入
tab.tBodies[0].rows[i].onmouseover=function(){
oldColor=this.style.background;
//记录当前行的背景色,易错把颜色在外部记录
this.style.background="green";
//易错 一定写this.style.background当前点击的行用this表示
}
//鼠标移出返回原来的颜色
tab.tBodies[0].rows[i].onmouseout=function(){
this.style.background=oldColor;
}
}
}
</script>
</body>
</html>