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

原创 2015年11月18日 22:36:18
表格的奇数行在点击时实现斑马线效果

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动作层的效果,但要注意合理利用。

版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript_DOM编程艺术第二版学习笔记-第9章

CSS-DOM9.1 style属性语法,element.style.property比如,获取文档的颜色:para.style.color这里,需要注意的是,当获取如:font-family中间有-...
  • sofia92
  • sofia92
  • 2015年12月25日 13:37
  • 674

jQuery实现斑马线效果

jQuery实现斑马线,以及行选中变色及checkbox变为true,离开行变色,

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

原生JavaScript实现斑马线表格

虽然现在有很多框架可以轻松的实现斑马线效果,而且兼容性也很不错,比如bootstrap,但是不可否认的是使用JavaScript实现的是兼容性最强的(浏览器不支持或禁止JavaScript脚本除外),...

Java中JTbale使用3—表格的斑马线效果

【作者:孟祥月  博客:http://blog.csdn.net/mengxiangyue】 在表格中有时候我们需要添加斑马线效果,为了使阅读更加方便。今天我就分享一下斑马线效果的源代码,这里只使用...

web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果拓展(预览图片)

web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果拓展(预览图片) web design Web Design These ...

web前端之JavaScript DOM编程艺术之用JavaScript实现基础动画效果

web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果 1. 动画基础知识 1.位置 html lang="en"> head> meta chars...

JavaScript DOM编程艺术 学习笔记(十)用JavaScript实现动画效果

虽然说利用dom技术修改文档的样式信息,用javaScript添加样式信息可以节约精力,总的来说,css仍然是完成这类任务的最佳工具,但是又一个应用领域是目前css尚且无能为力的,那就是动画。 ...

javascript dom 编程艺术 动画效果

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

JavaScript DOM编程艺术—显示“缩略语列表”

将文档中的标签中的title属性集中起来显示在一个页面. test.html Explaining the Document Object Model what is the ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript DOM编程艺术—表格的奇数行在点击时实现斑马线效果
举报原因:
原因补充:

(最多只允许输入30个字)