天天看点

表格行间隔显示颜色,鼠标移入时当前行高亮显示

<!DOCTYPE html>
<html>
  <head>
    <title>表格分行高亮显示</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css" target="_blank" rel="external nofollow" >-->
	<style type="text/css">
		table{
			border-collapse:collapse;
			border:solid 1px #0000CC;
			width:500px;
			background-color:#009966;
		}
		table td,table th{
			border:solid 1px #333399;
			text-align:center;
			padding-top:5px;
			padding-bottom:5px;
		}
		/*奇数行的样式*/
		.one{
			background-color:#0066FF;
		}
		/*偶数行的样式*/
		.two{
			background-color:#00FFCC;
		}
		/*鼠标移入时的样式*/
		#over{
			background-color:#CC3300;
			height:40px;
			z-index:1;
		}
	</style>
	<script type="text/javascript">
		//在浏览器完成数据的加载时就触发
		window.onload = function(){
			//获取所有的tr节点
			var trNodes = document.getElementsByTagName("tr");
			//纪录之前的值
			var preId;
			for(var x = 1; x <trNodes.length; x++){
				if(x % 2 == 1){
					trNodes[x].className = "one";
				}else{
					trNodes[x].className = "two";
				}
				//鼠标移入时的样式
				trNodes[x].οnmοuseοver=function(){
					preId = this.id;
					this.id = "over";
				}
				//鼠标移除时的样式
				trNodes[x].οnmοuseοut=function(){
					this.id = preId;
				}
			}
		}
	</script>
  </head>
  
  <body>
    <table align="center">
    	<tr>
    		<th>姓名</th><th>年龄</th><th>所在地</th>
    	</tr>
    	<tr>
    		<td>张三</td><td>21</td><td>北京</td>
    	</tr>
    	<tr>
    		<td>李四</td><td>20</td><td>成都</td>
    	</tr>
    	<tr>
    		<td>王五</td><td>25</td><td>长沙</td>
    	</tr>
    	<tr>
    		<td>赵六</td><td>30</td><td>福州</td>
    	</tr>
    	<tr>
    		<td>田七</td><td>26</td><td>上海</td>
    	</tr>
    	<tr>
    		<td>孙八</td><td>22</td><td>广州</td>
    	</tr>
    </table>
  </body>
</html>
           

继续阅读