首页 > 网页设计

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

简介:很多喜欢旅游或者是出差的朋友,由于时间都是比较长的,所以选择便宜的有着很多的优惠的预定酒店或者民宿软件成了很多的朋友的软肋,因为实在是太多了,有的还不是很真正的优惠实惠,那么现在你就可以不用担心了,小编已经为了都准备好了,经过时间大量朋友人员的多方的验证,整理为你推荐的绝对靠谱的订酒店民宿的软件平台。