jQuery实现表格颜色的交替显示

来源：互联网发布：猛将online数据库代码编辑：程序博客网时间：2024/04/29 04:24

很多时候为了清楚显示行数据，便于阅读，一般多是采用隔行颜色交替显示。

当然实现的方式也有很多，如果对于网站已经加载了jQuery（现在很多网站程序多是加载了jQuery的）可以很容易实现。

那么就来说说jQuery实现表格的隔行换行颜色的交替显示，效果图如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://test.myxzy.com/jquery/jquery-1.7.1.js" type="text/javascript"></script><title>jQuery实现表格颜色的交替显示 - 星知苑</title><script type="text/javascript">$(document).ready(function(){  $(".color tbody tr:odd").addClass("color1");  $(".color tbody tr:even").addClass("color2");  $(".color tbody tr")  .mouseover(function(){$(this).addClass("color3");})  .mouseout(function(){$(this).removeClass("color3");});});</script><style type="text/css">.color {border:1px solid #333;text-align:center;}.color th {background-color:#333; color:#FFF;}.color1 {background-color:#DDD; color:#333;}.color2 {background-color:#fff; color:#333;}.color3 {background-color:#666; color:#FFF;}</style> </head> <body> <Div align="center"><h1>jQuery实现表格颜色的交替显示 - <a href="http://www.myxzy.com">星知苑</a></h1></Div> <Div align="center"><table width="450" class="color">  <thead>    <tr>      <th>博客名称</th>      <th>作者</th>      <th>网址</th>    </tr>  </thead>  <tbody>    <tr>      <td>星知苑</td>      <td>星之宇</td>      <td>www.myxzy.com</td>    </tr>    <tr>      <td>星知苑</td>      <td>星之宇</td>      <td>www.myxzy.com</td>    </tr>    <tr>      <td>星知苑</td>      <td>星之宇</td>      <td>www.myxzy.com</td>    </tr>    <tr>      <td>星知苑</td>      <td>星之宇</td>      <td>www.myxzy.com</td>    </tr>  </tbody></table></div>   </body></html>

演示地址：http://test.myxzy.com/tablecolor/index.html

原码地址：http://pan.baidu.com/share/link?shareid=1834190756&uk=3271852832