这个实现的过程很简单，网上相关实现的例子很多，这里记录下自己之前实现的方法。参考的网上的例子，网址不记得了。
这个问题简单点就是鼠标响应事件。
下面放代码
<html>
<title></title>
<head>
var rows = document.getElementsByTagName('tr');//取得行
for(var i=0 ;i<rows.length; i++)
{
rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'
this.className += 'hilite';
}
rows[i].onmouseout = function(){//鼠标移开,改变该类的名称
this.className = this.className.replace('hilite','');
}
}
</script>
<style type="text/css">
.table1 tr:hover,.table1 tr.hilite
{
background-color:#99FF66;
color:#0000CC;
}
</style>
</head>
<body>
<form action="">
<table id="table1" class="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小红</td>
<td>12</td>
<td>女</td>
</tr>
<tr>
<td>小明</td>
<td>14</td>
<td>男</td>
</tr>
</table>
<table id="table2" class="table1">
<tr>
<th>国家</th>
<th>身份</th>
<th>性别</th>
</tr>
<tr>
<td>中国</td>
<td>将军</td>
<td>女</td>
</tr>
<tr>
<td>美国</td>
<td>部长</td>
<td>男</td>
</tr>
</table>
</form>
</body>
</html>
上面就是针对指定的table实现鼠标移动到某一行上面的时候那一行变色的这个效果