表格隔行变色效果是一种非常常见的效果，以前用javascript实现起来感觉还挺复杂的，如今通过jquery只需要一句代码就OK了，真的很强大，下面就来看看具体如何使用jquery实现表格隔行变色的效果吧。
隔行变色效果图如下：
Jquery实现表格隔行变色的效果的具体示例代码如下：
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>www.phpernote.com</title>
- </head>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"> </script>
- <script language="javascript">
- $(document).ready(function(){
- $('table tr:nth-child(odd)').addClass('edit');
- });
- </script>
- <style type="text/css">
- .edit{background-color:#a5e5aa;}
- </style>
- <body>
- <table border="1">
- <tr>
- <td>1</td>
- <td></td>
- </tr>
- <tr>
- <td>2</td>
- <td>php教程</td>
- </tr>
- <tr>
- <td>3</td>
- <td>http://www.daimajiayuan.com</td>
- </tr>
- <tr>
- <td>4</td>
- <td>php教程</td>
- </tr>
- <tr>
- <td>5</td>
- <td>代码家园</td>
- </tr>
- </table>
- </body>
- </html>
零七网部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与零七网进行文章共享合作。
