标签：des style class java ext color
<link rel="stylesheet" type="text/css" href="css.css" />
<style
type="text/css">
.one{
background-color:#e1e16a;
}
.two{
background-color:#75f094;
}
.over{
background-color:#0F6;
}
</style>
<script type="text/javascript" >
var
name;
function
trColor(){
/*
*思路：
*1、因为要操作行的样式，所以要先获取表格对象。
*2、获取所有被操作的行对象。
*3、遍历行并给每一行指定样式。
*
*/
var
oTabNode = document.getElementById("info");
//表格中所有的行
var
collTrNodes = oTabNode.rows;
//遍历时候从第二行遍历
for(var x=1;
x<collTrNodes.length;
x++){
if(x%2==1){
collTrNodes[x].className="one";
}
else{
collTrNodes[x].className="two";
}
//给每一个行对象都添加两个事件。
collTrNodes[x].onmouseover
= function(){
name
=this.className;
this.className="over";
}
collTrNodes[x].onmouseout
=
function(){
this.className=name;
}
}
}
//页面加载自动加载
onload
= function(){
trColor();
}
/*
//鼠标进入事件
function over(node){
name =
node.className;
node.className="over";
}
//鼠标离开时间
function
out(node){
node.className=name;
}
*/
</script>
</head>
<body>
<table id="info">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr
onmouseover="over(this)" onmouseout="out(this)">
<td>zero</td>
<td>0</td>
<td>wuhan</td>
</tr>
<tr>
<td>one</td>
<td>23</td>
<td>shanghai</td>
</tr>
<tr>
<td>tow</td>
<td>24</td>
<td>guangzhou</td>
</tr>
<tr>
<td>three</td>
<td>19</td>
<td>beijing</td>
</tr>
<tr>
<td>four</td>
<td>33</td>
<td>shenzhen</td>
</tr>
<tr>
<td>five</td>
<td>42</td>
<td>dongguan</td>
</tr>
<tr>
<td>six</td>
<td>11</td>
<td>qingdao</td>
</tr>
<tr>
<td>seven</td>
<td>87</td>
<td>shouer</td>
</tr>
<tr>
<td>eight</td>
<td>28</td>
<td>zhaoqing</td>
</tr>
</table>
</body>
标签：des style class java ext color
原文地址：http://www.cnblogs.com/aineko/p/3782774.html
