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

这是隔行变色的效果图



制作方法：

（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{
}也不会出错。