通常为了让页面呈现的更为美观,我们喜欢在奇偶行加上不同的颜色。效果如下:
使用jquery我们可以轻松的实现上面效果,代码如下:
<html> <head> <title>jquery奇偶行css效果</title> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <style type="text/css"> /*table中偶数行*/ .tabEven { background: #9d8e8b; } /*table中奇数行*/ .tabOdd { background: #ffffff; } </style> <script type="text/javascript"> $(document).ready(function () { $("#datalist tr:even").addClass("tabEven"); $("#datalist tr:odd").addClass("tabOdd"); }); </script> </head> <body> <table id="datalist"> <tr><td>第1行</td></tr> <tr><td>第2行</td></tr> <tr><td>第3行</td></tr> <tr><td>第4行</td></tr> <tr><td>第5行</td></tr> </table> </body> </html>
纯CSS实现代码:
#datalist tr:nth-child(odd){ background: #ffffff; } #datalist tr:nth-child(even){ background: #9d8e8b; }
时间: 2024-08-27 14:49:37