• 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.  50%; 
    19. margin: 24px; 
    20. font-size: 1.1em; 
    21. } 
    22. table.sample th {}{ 
    23. background: #3e83c9; 
    24. color: #fff; 
    25. font-weight: bold; 
    26. padding: 2px 11px; 
    27. text-align: left; 
    28. border-right: 1px solid #fff; 
    29. line-height: 1.2; 
    30. } 
    31. table.sample td {}{ 
    32. padding: 6px 11px; 
    33. border-bottom: 1px solid #95bce2; 
    34. vertical-align: top; 
    35. } 
    36. table.sample td * {}{ 
    37. padding: 6px 11px; 
    38. } 
    39. table.sample tr.alt td {}{ 
    40. background: #ecf6fc; 
    41. } 
    42. table.sample tr.over td {}{ 
    43. background: #bcd4ec; 
    44. } 
    45. </style> 
    46. <table class="stripeMe sample"> 
    47. <thead> 
    48. <tr> 
    49. <th>Lorem</th> 
    50. <th>Ipsum</th> 
    51. <th>Dolor</th> 
    52. <th>Sit</th> 
    53. <th>Amet</th> 
    54. </tr> 
    55. </thead> 
    56. <tbody> 
    57. <tr> 
    58. <td>Lorem</td> 
    59. <td>Ipsum</td> 
    60. <td>Dolor</td> 
    61. <td>Sit</td> 
    62. <td>Amet</td> 
    63. </tr> 
    64. <tr> 
    65. <td>Lorem</td> 
    66. <td>Ipsum</td> 
    67. <td>Dolor</td> 
    68. <td>Sit</td> 
    69. <td>Amet</td> 
    70. </tr> 
    71. <tr> 
    72. <td>Lorem</td> 
    73. <td>Ipsum</td> 
    74. <td>Dolor</td> 
    75. <td>Sit</td> 
    76. <td>Amet</td> 
    77. </tr> 
    78. <tr> 
    79. <td>Lorem</td> 
    80. <td>Ipsum</td> 
    81. <td>Dolor</td> 
    82. <td>Sit</td> 
    83. <td>Amet</td> 
    84. </tr> 
    85. <tr> 
    86. <td>Lorem</td> 
    87. <td>Ipsum</td> 
    88. <td>Dolor</td> 
    89. <td>Sit</td> 
    90. <td>Amet</td> 
    91. </tr> 
    92. <tr> 
    93. <td>Lorem</td> 
    94. <td>Ipsum</td> 
    95. <td>Dolor</td> 
    96. <td>Sit</td> 
    97. <td>Amet</td> 
    98. </tr> 
    99. <tr> 
    100. <td>Lorem</td> 
    101. <td>Ipsum</td> 
    102. <td>Dolor</td> 
    103. <td>Sit</td> 
    104. <td>Amet</td> 
    105. </tr> 
    106. <tr> 
    107. <td>Lorem</td> 
    108. <td>Ipsum</td> 
    109. <td>Dolor</td> 
    110. <td>Sit</td> 
    111. <td>Amet</td> 
    112. </tr> 
    113. <tr> 
    114. <td>Lorem</td> 
    115. <td>Ipsum</td> 
    116. <td>Dolor</td> 
    117. <td>Sit</td> 
    118. <td>Amet</td> 
    119. </tr> 
    120. <tr> 
    121. <td>Lorem</td> 
    122. <td>Ipsum</td> 
    123. <td>Dolor</td> 
    124. <td>Sit</td> 
    125. <td>Amet</td> 
    126. </tr> 
    127. </tbody> 
    128. </table> 
    129. </body> 
    130. </html> 
  • 相关阅读:
    动手动脑3
    AWK编程与应用
    BASH内置变量的使用
    服务器交互脚本expect
    编程对话框的界面程序
    每日打卡
    AppiumLibrary中文翻译
    Bootstrap4简单使用
    Python基础06-类与对象
    BDD模式-Python behave的简单使用
  • 原文地址：https://www.cnblogs.com/zerogo/p/2209233.html
Copyright © 2020-2023  润新知