当前位置:首页 > 网页设计 > jQuery实现表格颜色的交替显示

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

作者:星之宇 ┊ 时间:2013-4-26 19:29 ┊ 分类: 网页设计 ┊ 阅读:4386 ┊ 评论:1

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

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

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

点击查看原图


演示地址: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>  
目前有 1 条评论
avatar
Crit 2013-04-26 22:38回复1楼
挺不错的,以前写的一个asp留言板程序纯粹是用html实现。