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

最新推荐文章于 2018-11-27 08:56:01 发布

jaray

最新推荐文章于 2018-11-27 08:56:01 发布

阅读量1.3k

点赞数

分类专栏： js

js 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://test.myxzy.com/jquery/jquery-1.7.1.js" type="text/javascript"></script>
<title>jQuery实现表格颜色的交替显示 - 星知苑</title>
<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>
 <Div align="center"><h1>jQuery实现表格颜色的交替显示 - <a href="http://www.myxzy.com">星知苑</a></h1></Div>
 <Div align="center">
<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></div>  
 </body>
</html>

演示地址： http://test.myxzy.com/tablecolor/index.html

原码地址：http://pan.baidu.com/share/link?shareid=1834190756&uk=3271852832

jaray

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现表格颜色的交替显示

很多时候为了清楚显示行数据，便于阅读，一般多是采用隔行颜色交替显示。当然实现的方式也有很多，如果对于网站已经加载了jQuery（现在很多网站程序多是加载了jQuery的）可以很容易实现。那么就来说说jQuery实现表格的隔行换行颜色的交替显示，效果图如下jQuery实现表格颜色的交替显示 - 星知苑$(document).ready(function(){
复制链接

扫一扫

专栏目录