1. 程式人生 > >js實現表格隔行變色和滑鼠移入高亮

js實現表格隔行變色和滑鼠移入高亮

程式碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	
		</style>
		
		<script type="text/javascript">
			window.onload=function()
			{
				var oTab=document.getElementById('tab1')
				var oldColor='';
			   function toColor()
			   {
			   	for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			   //隔行變色
			   {    
			   	    oTab.tBodies[0].rows[i].onmouseover=function()
			   	    {  //滑鼠移入變色
			   	    	oldColor=this.style.background;
			   	    	this.style.background='green';
			   	    };
			   	    oTab.tBodies[0].rows[i].onmouseout=function()
			   	    {   //滑鼠移出恢復原來顏色
			   	    	this.style.background=oldColor;
			   	    }
			   	    if(i%2){
			   	    	oTab.tBodies[0].rows[i].style.background='';
			   	    }
			   	    else
			   	    {
			   	    	oTab.tBodies[0].rows[i].style.background='#ccc';
			   	    } 
			   }
			   }
			   toColor();   
			}
		</script>
	</head>
	<body>
		<table border="1" id="tab1" width="500">
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>年齡</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>張三</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>11</td>
					<td> </td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>李麻子</td>
					<td>39</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>HuHansan</td>
					<td>39</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>