首页 > 网页设计

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>  

相关合集

  • 塔防游戏排行榜推荐
塔防游戏排行榜推荐

简介:休闲加策略的游戏那就有莫属塔防类的手游的,不管是单机的还是手游都是很好玩,有的不仅是功能玩法还有各种独特的思维玩法,总之是可以在游戏中给你很多的欢乐的同时,还可以帮助你的头脑不断的进行思考,久而久之就可以提高你的智商了,排行榜推荐的塔防手游小编整理了很多,也是绝对好玩不腻不用充值的。