首页 > 网页设计

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>  

相关合集

  • 免费追剧神器有哪些
免费追剧神器有哪些

简介:免费追剧神器有哪些?对于平时时间比较多,喜欢追剧的小伙伴来说,一款免费的追剧神器可以让自己看到自己想看的电视剧,还能第一时间看到更新的最新视频,这几款软件都是可以直接在线观看,让你免费享受到更加快乐的追剧体验,视频一更新也会第一时间通知你,让你不错过精彩剧情。