实现表格每行随鼠标的移动改变颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>HTML 表格每行随鼠标的移动改变颜色 示例 -- 酷站代码</title>
<style type="text/css" media="all">
body {
color:#000;
}
.dreamdu:hover, .hover {
background: #3080CB;
color: #fff;
}
</style>
<script type="text/javascript">
/*
* 功能：使表格每行随鼠标的移动改变颜色
*/
function DreamduColorRows()
{
var dreamdurows = document.getElementsByTagName('tr');
for ( var i = 0; i < dreamdurows.length; i++ )
{
if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) )
{
continue;
}
if ( navigator.appName == 'Microsoft Internet Explorer' )
{
// ie不支持 :hover，所以...
dreamdurows[i].onmouseover = function()
{
this.className += ' hover';
}
dreamdurows[i].onmouseout = function()
{
this.className = this.className.replace( ' hover', '' );
}
}
}
}
window.onload=DreamduColorRows;
</script>
</head>
<body>
<table width="80%" border="0">
<tr class="dreamdu">
<td><a href="http://www.dreamdu.com/javascript/">JavaScript教程</a></td>
<td><a href="http://www.dreamdu.com/xhtml/table/">HTML表格</a></td>
</tr>
<tr>
<td>注意!</td>
<td>这行没有改变颜色.</td>
</tr>
<tr class="dreamdu">
<td>CSS</td>
<td>HTML</td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Title</title> <style> table{border-collapse:collapse;border:1px solid #ddd;} th,td{border:1px solid #ddd;} </style> </head> <body> <table> <tr><th>132</th><td>132</td></tr> <tr><th>132</th><td>132</td></tr> </table> </body> </html>