表格每行随鼠标的移动改变颜色示例 -- JavaScript教程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>表格每行随鼠标的移动改变颜色示例</title>		
		<style type="text/css" media="all">
			body
			{
				color:#000;
			}
			.dreamdu:hover,.hover 
			{
				background: #3080CB;
				color: #fff;
			}
		</style>
		<script type="text/javascript">
			/*
			 * 功能：使表格每行随鼠标的移动改变颜色
			 * 作者：可爱的猴子 www.dreamdu.com/blog/
			 */
			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>

JavaScript教程	HTML表格
注意!	这行没有改变颜色.
CSS	HTML