<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
table{width:200px;height:100px;margin:auto;border:1px solid orange;border-collapse:collapse}
td{border:1px solid orange;}
</style>
</head>
<body onload="changeColor()">
<table>
<tr><td>11111</td><td>11111</td><td>11111</td></tr>
<tr><td>22222</td><td>22222</td><td>22222</td></tr>
<tr><td>33333</td><td>33333</td><td>33333</td></tr>
<tr><td>44444</td><td>44444</td><td>44444</td></tr>
<tr><td>55555</td><td>55555</td><td>55555</td></tr>
</table>
</body>
<script>
function changeColor(){
var trs = document.getElementsByTagName('tr');
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor = 'silver';
}else{
trs[i].style.backgroundColor = 'gray';
}
//在这里绑定元素onmouseover事件和onmouseout事件
var oldColor;
//用来备份tr原来的样式的值的
trs[i].onmouseover = function(){
oldColor = this.style.backgroundColor;
this.style.backgroundColor = 'green';
}
trs[i].onmouseout = function(){
this.style.backgroundColor = oldColor;
}
}
}
</script>
</html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
table{width:200px;height:100px;margin:auto;border:1px solid orange;border-collapse:collapse}
td{border:1px solid orange;}
</style>
</head>
<body onload="changeColor()">
<table>
<tr><td>11111</td><td>11111</td><td>11111</td></tr>
<tr><td>22222</td><td>22222</td><td>22222</td></tr>
<tr><td>33333</td><td>33333</td><td>33333</td></tr>
<tr><td>44444</td><td>44444</td><td>44444</td></tr>
<tr><td>55555</td><td>55555</td><td>55555</td></tr>
</table>
</body>
<script>
function changeColor(){
var trs = document.getElementsByTagName('tr');
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor = 'silver';
}else{
trs[i].style.backgroundColor = 'gray';
}
//在这里绑定元素onmouseover事件和onmouseout事件
var oldColor;
//用来备份tr原来的样式的值的
trs[i].onmouseover = function(){
oldColor = this.style.backgroundColor;
this.style.backgroundColor = 'green';
}
trs[i].onmouseout = function(){
this.style.backgroundColor = oldColor;
}
}
}
</script>
</html>
扫一扫
3198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
