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

最新推荐文章于 2021-06-21 14:28:08 发布

码动传奇

最新推荐文章于 2021-06-21 14:28:08 发布

阅读量794

点赞数

分类专栏： javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/u013806814/article/details/49914191

版权

javascript 专栏收录该内容

17 篇文章 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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM编程艺术—表格的奇数行在点击时实现斑马线效果

表格的奇数行在点击时实现斑马线效果test.html文件 css.css文件.odd{ background-color:red;}.white{ background-color:white;}addLoadEvent.js文件functi
复制链接

扫一扫