首页 > 代码库 > 示例-行颜色间隔显示并高亮
示例-行颜色间隔显示并高亮
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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 onm ouseover="over(this)" onm ouseout="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>