手机游戏
经典单机
角色扮演
休闲益智
动作冒险
射击枪战
赛车竞速
模拟经营
解密闯关
策略战争
手机软件
时尚购物
体育运动
资讯阅读
教育学习
摄影摄像
生活服务
效率办公
聊天社交
视频盒子
其它软件
新闻资讯
游戏攻略
软件教程
游戏问答
软件资讯
软件技术
叨叨念念
网站技术
技术问答
软件教程
资源资料
原创作品
代码学习
网页设计
网络技术
合集
合集
游戏合集
软件合集
资讯合集
视频合集
首页 > 网页设计 > 网页设计

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哪个好
  • 马蜂窝旅游app官方下载
  • 驴迹导游下载
  • 小鹿导游app下载
  • 飞猪app官方下载安装
随着社会压力的不断的增大,生活家庭各种压力想要好好的出去放松心情,但是却不知道哪个旅游软件比较好用,没有关系小编为你推荐绝对是让你用了就会喜欢上的深受好评的旅游相关的app,可以让你轻松的规划旅游的路线还有各种出游的吃喝玩乐的出行攻略一手掌握。

相关资讯