html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Js</title>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" style="background: #ccc; width: 100%;">
<tr id="infotr"><td>姓名</td><td>年龄</td><td>学历</td></tr>
<tr id="infotr"><td>张三</td><td>2</td><td>小学</td></tr>
<tr id="infotr"><td>李四</td><td>3</td><td>小学</td></tr>
<tr id="infotr"><td>王五</td><td>4</td><td>小学</td></tr>
</table>
</body>
</html>
js
/*
错误的示范
因为document.getElementById("infotr")有多个,而getElementById只能取得第一个
如果id有重复的时候用document.all，表示ID数组
*/
/*function changecolor(obj,color){
obj.bgColor = color;
}
window.onload = function(){
var trobj = document.getElementById("infotr");
trobj.addEventListener("mouseover",function(){
changecolor(this,'ffffff')
},false);
trobj.addEventListener("mouseout",function(){
changecolor(this,'cccccc')
},false);
}*/
//正确代码
function changecolor(obj,color){
obj.bgColor = color;
}
window.onload = function(){
var trobj = document.all("infotr");
for(x = 1; x < trobj.length; x ++){
trobj[x].addEventListener("mouseover",function(){
changecolor(this,'ffffff')
},false);
trobj[x].addEventListener("mouseout",function(){
changecolor(this,'cccccc')
},false);
}
}
