js表格隔行变色 鼠标经过变换颜色代码

　　关于js隔行换色的特效，烈火以前曾经提到不少，今天恰巧在某程序员的博客又看到一款比较不错的精简代码，还实现的鼠标的感触变换颜色，首先我们来回顾一下原来的特效：

　　2009年11月，烈火先后发表了《JavaScript 实现表格隔行换色的效果》、《表格隔行换色特效 非常实用的哦》

　　2010年7月，又发表了《jQuery 隔行换色 鼠标滑动单行变色代码》，让我们感受到jQuery的魅力。

　　好了，再看一下本文的特效：

<title>隔行变色+鼠标经过变色JS效果 - Liehuo.Net</title> 隔行变色+鼠标经过变色JS效果 <br /><br /> <script language="javascript"> function show(){ var tab=document.getElementById("tab"); var tr=tab.getElementsByTagName("tr"); for(var i=0;i<=tr.length;i++){ if(i%2==0){ tr[i].style.backgroundColor="#ccc"; tr[i].onmouseover=function(){this.style.background="red"}; tr[i].onmouseout=function(){this.style.background="#ccc"} }else{ tr[i].style.backgroundColor="#fff"; tr[i].onmouseover=function(){this.style.background="red"}; tr[i].onmouseout=function(){this.style.background="#fff"} } } } window.onload=show; </script> <table id="tab"> <tr><td>烈火网 - 教程丰富的网络学院</td><td>烈火网 - 教程丰富的网络学院</td></tr> <tr><td>烈火网 - 教程丰富的网络学院</td><td>烈火网 - 教程丰富的网络学院</td></tr> <tr><td>烈火网 - 教程丰富的网络学院</td><td>烈火网 - 教程丰富的网络学院</td></tr> <tr><td>烈火网 - 教程丰富的网络学院</td><td>烈火网 - 教程丰富的网络学院</td></tr> <tr><td>烈火网 - 教程丰富的网络学院</td><td>烈火网 - 教程丰富的网络学院</td></tr> </table> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!　

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!