关闭

JavaScript DOM编程艺术—表格的奇数行在点击时实现斑马线效果

标签: javascriptdom
465人阅读 评论(0) 收藏 举报
分类:
表格的奇数行在点击时实现斑马线效果

test.html文件

<!document html>
<html>
<head>
</head>
<body>
<table border="1" width="400" height="200">
	<tr>
		<td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td>
	</tr>
	<tr>
		<td></td><td></td>
	</tr>
</table>
<link rel="stylesheet" href="css.css" />
<script type="text/javascript" src="addLoadEvent.js"></script>
<script type="text/javascript" src="addClass.js"></script>
</body>
</html>


css.css文件

.odd{
	background-color:red;
}
.white{
	background-color:white;
}

addLoadEvent.js文件

function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != 'function'){
		window.onload = func;
	}
	else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}

addClass.js

function addClass(element,value){
	if(!element.className){
		element.className = value;
	}
	else{
		element.className += " ";
		element.className += value;
	}
}
function show(){
	var trs = document.getElementsByTagName("tr");
	var odd = false;
	for(var i=0; i<trs.length; i++){
		if(odd == false){
			trs[i].onmouseover = function(){
				addClass(this,"odd");
			} 
			trs[i].onmouseout = function(){
				addClass(this,"white");
			} 
			odd = true;
		}
		else{
			odd = false;
		}
	}
}

DOM可以实现CSS动作层的效果,但要注意合理利用。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:300288次
    • 积分:7820
    • 等级:
    • 排名:第2666名
    • 原创:498篇
    • 转载:42篇
    • 译文:3篇
    • 评论:44条
    个性签名
    业精于勤,荒于嬉;行成于思,毁于随。
    最新评论