jQuery双色表格的实现

  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. <title> jquery </title> 
  5. <script type="text/javascript" src="jquery.js"></script> 
  6. </head> 
  7. <body> 
  8. <script type="text/javascript"> 
  9. $(document).ready(function(){ 
  10. //jQuery ready is quicker than onload 
  11. $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}); 
  12. $(".stripeMe tr:even").addClass("alt"); 
  13. }); 
  14. </script> 
  15. <style type="text/css"> 
  16. table.sample {}{ 
  17. border-collapse: collapse; 
  18. width: 50%; 
  19. margin: 24px; 
  20. font-size: 1.1em; 
  21. table.sample th {}{ 
  22. background: #3e83c9; 
  23. color: #fff; 
  24. font-weight: bold; 
  25. padding: 2px 11px; 
  26. text-align: left; 
  27. border-right: 1px solid #fff; 
  28. line-height: 1.2; 
  29. table.sample td {}{ 
  30. padding: 6px 11px; 
  31. border-bottom: 1px solid #95bce2; 
  32. vertical-align: top; 
  33. table.sample td * {}{ 
  34. padding: 6px 11px; 
  35. table.sample tr.alt td {}{ 
  36. background: #ecf6fc; 
  37. table.sample tr.over td {}{ 
  38. background: #bcd4ec; 
  39. </style> 
  40. <table class="stripeMe sample"> 
  41. <thead> 
  42. <tr> 
  43. <th>Lorem</th> 
  44. <th>Ipsum</th> 
  45. <th>Dolor</th> 
  46. <th>Sit</th> 
  47. <th>Amet</th> 
  48. </tr> 
  49. </thead> 
  50. <tbody> 
  51. <tr> 
  52. <td>Lorem</td> 
  53. <td>Ipsum</td> 
  54. <td>Dolor</td> 
  55. <td>Sit</td> 
  56. <td>Amet</td> 
  57. </tr> 
  58. <tr> 
  59. <td>Lorem</td> 
  60. <td>Ipsum</td> 
  61. <td>Dolor</td> 
  62. <td>Sit</td> 
  63. <td>Amet</td> 
  64. </tr> 
  65. <tr> 
  66. <td>Lorem</td> 
  67. <td>Ipsum</td> 
  68. <td>Dolor</td> 
  69. <td>Sit</td> 
  70. <td>Amet</td> 
  71. </tr> 
  72. <tr> 
  73. <td>Lorem</td> 
  74. <td>Ipsum</td> 
  75. <td>Dolor</td> 
  76. <td>Sit</td> 
  77. <td>Amet</td> 
  78. </tr> 
  79. <tr> 
  80. <td>Lorem</td> 
  81. <td>Ipsum</td> 
  82. <td>Dolor</td> 
  83. <td>Sit</td> 
  84. <td>Amet</td> 
  85. </tr> 
  86. <tr> 
  87. <td>Lorem</td> 
  88. <td>Ipsum</td> 
  89. <td>Dolor</td> 
  90. <td>Sit</td> 
  91. <td>Amet</td> 
  92. </tr> 
  93. <tr> 
  94. <td>Lorem</td> 
  95. <td>Ipsum</td> 
  96. <td>Dolor</td> 
  97. <td>Sit</td> 
  98. <td>Amet</td> 
  99. </tr> 
  100. <tr> 
  101. <td>Lorem</td> 
  102. <td>Ipsum</td> 
  103. <td>Dolor</td> 
  104. <td>Sit</td> 
  105. <td>Amet</td> 
  106. </tr> 
  107. <tr> 
  108. <td>Lorem</td> 
  109. <td>Ipsum</td> 
  110. <td>Dolor</td> 
  111. <td>Sit</td> 
  112. <td>Amet</td> 
  113. </tr> 
  114. <tr> 
  115. <td>Lorem</td> 
  116. <td>Ipsum</td> 
  117. <td>Dolor</td> 
  118. <td>Sit</td> 
  119. <td>Amet</td> 
  120. </tr> 
  121. </tbody> 
  122. </table> 
  123. </body> 
  124. </html> 

你可能感兴趣的:(jquery)