DOM table 隔行变色

Joe?

于 2016-03-12 09:13:00 发布

阅读量71

点赞数

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5267894.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
				//tbody 可能有多个 用tBodies  rows行 cells列
//			alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//张三
		window.onload = function(){
			
			var oTab = document.getElementById("tab1");

			var oldColor = "";
			
			//隔行变色
			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 = "";//这样会出现一个问题 清除了以前的颜色 解决这个问题就是把以前的颜色存一下
					
					this.style.background = oldColor;
				}
				if(i%2)
				{
					oTab.tBodies[0].rows[i].style.background = "#ccc";
				}else{
					oTab.tBodies[0].rows[i].style.background = "";
				}
			}
		}
	</script>
	<body>
	<table id="tab1" border="1" width="500">
		
	
		<thead>
			<td>ID</td>
			<td>姓名</td>
			<td>年龄</td>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Blue</td>
				<td>27</td>
			</tr>
			<tr>
				<td>2</td>
				<td>张三</td>
				<td>23</td>
			</tr>
			<tr>
				<td>3</td>
				<td>李四</td>
				<td>22</td>
			</tr>
			<tr>
				<td>4</td>
				<td>王五</td>
				<td>25</td>
			</tr>
			<tr>
				<td>5</td>
				<td>张伟</td>
				<td>24</td>
			</tr>
			
		</tbody>
		
	</table>
	</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5267894.html