1 index.html 文件
<!DOCTYPE html>
<html long="zh-cn">
<head>
<meta charset="utf-8">
<title>JavaScripe程序开发</title>
<scripttype="text/javascript" src="1.js"></script>
</head>
<body>
<!-- 设置一个报表,然后设置鼠标在报表上移动时的属性,鼠标移动至此报表行,则此报表行高亮 -->
<div id = "infoTab">
<table border="1"cellpadding="5", cellspacing="0" bgcolor="F2F2F2"width="50%">
<tr id="infoTr">
<td>姓名</td>
<td>学号</td>
<td>性别</td>
</tr>
<tr id="infoTr">
<td>小明</td>
<td>110</td>
<td>男</td>
</tr>
<tr id="infoTr">
<td>大明</td>
<td>119</td>
<td>男</td>
</tr>
</tr>
<tr id="infoTr">
<td>大da明</td>
<td>120</td>
<td>男</td>
</tr>
</table>
</div>
</body>
</html>
<!-- 每一个HTML元素都可以用id 来标注,随后可以通过document.getElenentById()取得指定ID的元素,取得元素之后就可以对其进行操作 -->
<!-- 但是document.getElenentById()只能取得一个元素信息。-->
<!-- 此代码中,最为方便的是所有的行都使用了一个id标注, “id = infoTr” -->
2 1.js 文件
/**
obj : 表示当前要改变的颜色的对象;
color : 设置要显示的颜色
*/
/*function changeColor (obj,color) {
obj.bgColor= color;
}
window.onload = function(){ //为onload事件绑定处理
vartrObj = document.getElementById("infoTr");
trObj.addEventListener("mouseover",function(){
//this表示当前的对象,实际上就是tr, 鼠标进去的地方,标记成白色
changeColor(this,'FFFFF');
};false);
trObj.addEventListener("mouseout",function(){
//鼠标出来的地方,还原成原来的颜色
changeColor(this,'F2F2F2');
};false);
}*/
//document.getElementById("infoTr");只能取得具有相同的id 的第一个对象,即此时,鼠标移动只对第一个对象的设置起作用,
//要想取得相同id 的所有的对象,则使用document.all(id)返回的是一个相同ID的对象
//的数组,此时,可以通过循环,获取数组中的对象,让其进行所有对象的操作;
function changeColor (obj,color) {
obj.bgColor= color;
}
window.onload = function(){ //为onload事件绑定处理
vartrObj = document.all("infoTr");
for(var i = 0 ; i < trObj.length; ++i) {
trObj[i].addEventListener("mouseover",function(){
//this表示当前的对象,实际上就是tr, 鼠标进去的地方,标记成白色
changeColor(this,'FFFFF');
},false);
trObj[i].addEventListener("mouseout",function(){
//鼠标出来的地方,还原成原来的颜色
changeColor(this,'F2F2F2');
},false);
}
}