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);
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
