隔行变色，非常简单，使用jquery实现的

　　几年前，如果你还使用Table建站，大家会笑话你没有使用DIV+CSS，现如今，大家现在都喜欢在自己的网站引入jQuery框架，如果你还没有使用的话，那你就OUT了，自从网站引入jQuery以后，我们可以很方便的添加一些令人感觉到新颖的特效，哪怕是一些简单的功能！

　　今天无意发现了这个JQUERY版本的隔行换色，对原有使用了JQ的朋友来说，你只需两行代码就能实现这个功能啦，确实挺方便、实用。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<title>一行一行的换颜色</title> <SCRIPT LANGUAGE="<b>Java</b>Script" src="/uploads/common/js/jquery-1.3.2.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- $(function(){ $("tr").each(function(i){ this.style.backgroundColor = ['#ccc','#fff'][i%2] }) //$("tr:not(:first)") //$("tr:even").each(function(){ this.style.backgroundColor = '#ccc' }) //当然even能实现 }) //--> </SCRIPT> <table> <thead> <tr> <td>姓名</td> <td>电话</td> <td>地址</td> </tr> </thead> <tbody> <tr> <td>Carrion Fly</td> <td>Worldwide</td> <td>gray</td> </tr> <tr> <td>Office Fly</td> <td>California, Bay Area</td> <td>white</td> </tr> <tr> <td>Common House Fly</td> <td></td> <td>brown</td> </tr> <tr> <td>Horn Fly</td> <td>Kansas</td> <td>red</td> </tr> <tr> <td>Face Fly</td> <td></td> <td>green</td> </tr> <tr> <td>Stable Fly</td> <td></td> <td>black</td> </tr> <tr> <td>Carrion Fly</td> <td>Worldwide</td> <td>gray</td> </tr> <tr> <td>Office Fly</td> <td>California, Bay Area</td> <td>white</td> </tr> <tr> <td>Common House Fly</td> <td></td> <td>brown</td> </tr> <tr> <td>Horn Fly</td> <td>Kansas</td> <td>red</td> </tr> <tr> <td>Face Fly</td> <td></td> <td>green</td> </tr> <tr> <td>Stable Fly</td> <td></td> <td>black</td> </tr> </tbody> </table> <!-- 这里是JS里的数组吗？ $(function(){ $("tr").each(function(i){ this.style.backgroundColor = ['#ccc','#fff'][i%2] }) }) ['#ccc','#fff'][i%2] //就这里这个。当然可以用tr:even 。 代码的过程是知道的， 对i%2取余数，要么为0要么为1， 所以 要么是['#ccc','#fff'][0] 要么是 ['#ccc','#fff'][1] ， 所以要么是#ccc,要么是#fff. javascript数组可以这么定义 var array =['arr1','arr2']; 但记忆钟似乎不能 ['arr1','arr2'][0],['arr1','arr2'][1],这样写。 在JQ群理问了，他说是 JQ里把数组封装了。 才可以['arr1','arr2'][0],['arr1','arr2'][1],这样写。 说Javascript里要 这样写： if(i%2){ this.style.backgroundColor='#ccc' ; else this.style.backgroundColor='#fff'; } 晕了。 刚才自己写了个例子，证明自己是正确的。 <script> for(var i = 0;i<10;i++){ alert(['1','2'][i%2]); } </script> 嘿嘿。有时候太不相信自己了。 --><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

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