Jquery实现表格隔行变色的效果

表格隔行变色效果是一种非常常见的效果,以前用javascript实现起来感觉还挺复杂的,如今通过jquery只需要一句代码就OK了,真的很强大,下面就来看看具体如何使用jquery实现表格隔行变色的效果吧。

隔行变色效果图如下:

Jquery实现表格隔行变色的效果的具体示例代码如下:

  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4. <title>www.phpernote.com</title> 
  5. </head> 
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"> </script> 
  7. <script language="javascript"> 
  8. $(document).ready(function(){ 
  9.     $('table tr:nth-child(odd)').addClass('edit'); 
  10. }); 
  11. </script> 
  12. <style type="text/css"> 
  13. .edit{background-color:#a5e5aa;} 
  14. </style> 
  15. <body> 
  16. <table border="1"> 
  17.     <tr> 
  18.         <td>1</td> 
  19.         <td></td>  
  20.     </tr> 
  21.     <tr> 
  22.         <td>2</td> 
  23.         <td>php教程</td>    
  24.     </tr> 
  25.     <tr> 
  26.         <td>3</td> 
  27.         <td>http://www.daimajiayuan.com</td>  
  28.     </tr> 
  29.     <tr> 
  30.         <td>4</td> 
  31.         <td>php教程</td>  
  32.     </tr> 
  33.     <tr> 
  34.         <td>5</td> 
  35.         <td>代码家园</td>  
  36.     </tr> 
  37. </table> 
  38. </body> 
  39. </html> 

转载请注明:代码家园 » Jquery实现表格隔行变色的效果

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)