看书《DIV+CSS商业案例与网页布局开发精讲》_表格_隔行变色_随手笔记

隔行变色表格效果实现

最新推荐文章于 2025-04-28 12:20:34 发布

原创最新推荐文章于 2025-04-28 12:20:34 发布 · 662 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#隔行变色 #细线表格

学习心得专栏收录该内容

61 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript实现隔行变色的表格效果。通过为不同行设置不同背景色，增强表格可读性；同时，利用简单的JavaScript代码实现鼠标悬停时行颜色变化，提升用户体验。

这是隔行变色的效果图

制作方法：

（1）利用table的背景色模拟表格边框效果 ( <table border="0" cellspacing="1" cellpadding="0"> )

（2）制作静态隔行变色：根据行的奇数和偶数定义不同的背景色 ( class分别为tr_1和tr_2 )，标题另定义背景色 ( tr_title )

（3）制作鼠标经过行变色：先定义一个class类，设置鼠标经过时行的变化，如.special{background-color:#85BFDD;cursor:pointer;}

然后写Javascript代码，

<script type="text/javascript">
	window.onload=function (){
		var rows = document.getElementsByTagName('tr');
		for (var i=0;i<rows.length;i++){
			var cn;<span style="white-space:pre">						</span>//声明变量cn
			if(rows[i].className == 'tr_title'){
				continue;
			}
			rows[i].onmouseover = function(){		//鼠标在行上面的时候
				cn = this.className;<span style="white-space:pre">			</span>//cn保存一下上一次的值
				this.className = 'special';
			}
			rows[i].onmouseout = function(){		//鼠标离开时
				this.className = this.className.replace('special','');
				this.className = cn;<span style="white-space:pre">			</span>//这里cn就是上一次的值
			}
		}
	}
</script>

注：这里Javascript是写在头部的，所以要加window.onload=function{ }函数事件，如果是写在body下面的html内，就不需要了

因为，代码都是从上往下一行一行往下执行的，

（1）如果JS写在头部，即放在上边是先执行js 后创建body里的对象 js找不到body里的对象就会报错, 所以要加window.onload=function{ }，即代码都加载完成之后再执行JS，就不会出错了，

（2）而如果放在body下边body里对象创建后，才执行js，不需要加window.onload=function{ }也不会出错。