只用很简单的脚本即可实现表格隔行变色的效果
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<style>
*{border:none;}
table{width:100%;border:1px solid silver;margin-bottom:30px;background:#F7F7F7}
</style>
在网页<body>区添加以下代码
<table id="tb1">
<tr ><td>1</td></tr>
<tr ><td> 2 </td></tr>
<tr ><td> 3 </td></tr>
<tr ><td> 4 </td></tr>
<tr ><td> 5</td></tr>
<tr ><td> 6</td></tr>
</table>
<table id="tb2">
<tr ><td>7 </td></tr>
<tr ><td> 8 </td></tr>
<tr ><td> 9 </td></tr>
<tr ><td>sharejs.com</td></tr>
<tr ><td> 0 </td></tr>
<tr ><td> sharejs.com </td></tr>
</table>
<script>
/*****************************************************
* Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
******************************************************/
//代码如下
var G = function(id){return document.getElementById(id)}
var EACH = function(o,fn){for(var i=0;i<o.length;i++){fn.call(o[i],i,o); if(i==o.length-1) return o}}
var _2009_ = function(){this.init.apply(this,arguments)};
_2009_.prototype={
init:function(o){
EACH(G(o.id).rows,function(i,O){i%2== +!!o.parity ? this.style.background = o.cor1:'';
this['color'] = this.style.background;
this.onmouseover = function(){this.style.background = o.cor2}
this.onmouseout = function(){this.style.background = this['color']}
})
}
};
//用法如下.可设定奇偶.
new _2009_({id:'tb1',cor1:'#DDDDE4',cor2:'#BAD0FC'});
new _2009_({id:'tb2',cor1:'#DDDDE4',cor2:'#BAD0FC',parity:'默认是奇数,设了就是偶数'});
</script>
