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

作者：星知苑时间：2013-04-26 19:29:01

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

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

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

[break]

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

<script src="http://demo.myxzy.com/jquery/jquery-1.7.1.js" type="text/javascript"></script>
<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>
<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>

良心推荐

榴莲app下载汅网站进入ios合集

榴莲app下载汅网站进入ios合集这里的欢乐是很多的，都是免费的可以真实得到，让你轻松的看片，各种交友等，娱乐的方式是多种多样，每一个都是有你喜欢的，让你在手机中就可以尽情的享受到那种平时没有的欢乐，也是很多老司机手机必备的，晚上男孩子都是必看的东西全部提供，不管是在娱乐聊天还是看视频都是一举两得，绝对是很欢乐。