(10)行颜色间隔显示并高亮:鼠标事件onmouseover、onmouseout
重点:鼠标事件、name全局变量的理解
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
.one
{
background-color:#C9C;
}
.two
{
background-color:#CF9;
}
.on
{
background-color:#03F;
}
</style>
<script type="text/javascript">
function trColor()
{
//首先获取表格对象
var TabNode=document.getElementById("Tabid");
var TrNodes=TabNode.rows;
//获取所有备操作的行对象
for(var i=1;i<TrNodes.length;i++)
{
if(i%2==0)
{
TrNodes[i].className="one";
}
else
{
TrNodes[i].className="two";
}
}
}
//trColor();注意不能这样写,因为table还没有加载进来,所以TabNode=null,出现脚本错误
//可以这样解决,用onload方法,在浏览器完成对象的装载后(即body的数据都装载完)立刻触发
οnlοad=function ()
{
trColor();
}
var name;//用于记录当鼠标悬浮在此行时的className,当离开此行时,就可以直接用此行的类名颜色,不用循环去找了
function over(node)
{
name=node.className;
node.className="on";
}
function out(node)
{
node.className=name;
}
</script>
</head>
<body>
<table id="Tabid">
<tr >
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr >
<!--定义两个事件源,一个是鼠标悬停,一个是鼠标掠过-->
<tr onmouseover="over(this)" onmouseout="out(this)">
<td>张三</td>
<td>20</td>
<td>北京</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" >
<td>李四</td>
<td>34</td>
<td>南京</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" >
<td>王五</td>
<td>45</td>
<td>上海</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td>赵六</td>
<td>35</td>
<td>大连</td>
</tr>
</table>
</body>
</html>