- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
表格隔行换色的实现代码，这个没有用到CSS，是用JS控制的，不限表格行数，可以无限制扩展下去。如果是多个表格，只需设置不同的表格ID就可以无限制增多表格。很方便实用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>隔行换色</title> </head> <body> <style> *{border:none;} table{width:100%;border:1px solid silver;margin-bottom:30px;background:#F8F8F8} </style> <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> </table> <table id="tb2"> <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> </table> <script> //代码如下 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:'#CCC',cor2:'#0066CC'}); new _2009_({id:'tb2',cor1:'#CCC',cor2:'#0066CC',parity:'默认是奇数,设了就是偶数'}); </script> </body> </html>