隔行变色jquery 实现

拼搏现实的明天。 2022-06-06 01:18 304阅读 0赞 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>jquery 奇偶变色</title>
  6. <script type="text/javascript" src="Themes/js/jquery-1.3.2.min.js"></script>
  7. <script>
  8. $(document).ready(function() {
  9. $("#hacker").find("tr").addClass("odd");
  10. $("#hacker").find("tr:even").addClass("even");
  11. // $("tr").addClass("odd");
  12.  //$("tr:even").addClass("even"); //奇偶变色，添加样式
  13.  //$("#hacker tr").addClass("odd");
  14. //$("#hacker tr:even").addClass("even");
  15. });
  16. </script>
  17. <style>
  18. #hacker tr:hover{background-color:red;}
  20. .odd {background-color: #fff; /* pale yellow for odd rows */}
  21. .even {background-color: #000; /* pale blue for even rows */}
  22. </style>
  23. </head>
  24. <body>
  25. <table id="hacker">
  26. <tr>
  27. <td>As You Like It</td>
  28. <td>Comedy</td>
  29. </tr>
  30. <tr>
  31. <td>All's Well that Ends Well</td>
  32. <td>Comedy</td>
  33. </tr>
  34. <tr>
  35. <td>Hamlet</td>
  36. <td>Tragedy</td>
  37. </tr>
  38. <tr>
  39. <td>Macbeth</td>
  40. <td>Tragedy</td>
  41. </tr>
  42. <tr>
  43. <td>Romeo and Juliet</td>
  44. <td>Tragedy</td>
  45. </tr>
  46. <tr>
  47. <td>Henry IV, Part I</td>
  48. <td>History</td>
  49. </tr>
  50. <tr>
  51. <td>Henry V</td>
  52. <td>History</td>
  53. </tr>
  54. </table>
  55. </body>
  56. </html>

三种方法，可以找到合适的

发表评论

表情：
评论列表 （有 0 条评论，304人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ListView隔行变色

    ListView隔行变色也许我们工作中或用到，有的客户会要求你变换listView的颜色，这样看起来比较好看所以我就自己写了 关于隔行变色的代码。 不多说直接上代码： 这是

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 308 阅读