首页 > 网络编程 > JavaScript > 网页特效 > 典型特效 > 一种表格背景色渐变效果的实现 2007-01-31 00:00:00 作者： 一种表格背景色渐变效果的实现 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <style> .menu td{ font-size:12px; color:white; font-weight:bold; background-color:#336699; border:1px solid #336699; border:1px solid #336699; filter:blendtrans(duration=1); text-align:center;} </style> <script language="javascript" type="text/javascript"> function showfilter(obj){ var tds=obj.getElementsByTagName("td"); for(var i=0;i<tds.length;i++) {with(tds[i]) {onmouseover=function(){with(this){filters[0].apply(); style.color='black'; style.border='1px solid white'; style.background='#66ccff'; filters[0].play();}} onmouseout=function(){with(this){filters[0].apply(); style.color='white'; style.border='1px solid #336699'; style.background='#336699'; filters[0].play();}} }}} </script> </head> <body> <table width="500" border="1" cellspacing="1" cellpadding="1" class="menu" id="xmenu"> <tr> <td height="30">1111111111111</td> </tr> <tr> <td height="30">2222222222222</td> </tr> <tr> <td height="30">3333333333333</td> </tr> <tr> <td height="30">4444444444444</td> </tr> <tr> <td height="30">5555555555555</td> </tr> <tr> <td height="30">6666666666666</td> </tr> <tr> <td height="30">77777777777777</td> </tr> <tr> <td height="30">88888888888888</td> </tr> <tr> <td height="30">99999999999999</td> </tr> </table> <script>showfilter(xmenu);</script> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:Extjs根据条件设置表格某行背景色示例javascript修改表格背景色实例代码分享jquery css 设置table的奇偶行背景色示例如何用jquery控制表格奇偶行及活动行颜色表格奇偶行设置不同颜色的核心JS代码利用JQuery和JS实现奇偶行背景颜色自定义效果jQuery实现表格奇偶行显示不同背景色 就这么简单
