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


Posted in Javascript onMarch 09, 2015

本文实例讲述了jQuery实现表格颜色交替显示的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery实现表格颜色的交替显示</title>

<script type="text/javascript" src="js/jquery1.3.2.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){

  jQuery(".truecolor tr:odd").addClass("color1");

  jQuery(".truecolor tr:even").addClass("color2");

  jQuery(".truecolor tr").hover(function(){

    jQuery(this).addClass("color3")

  },function(){

    jQuery(this).removeClass("color3")

  });

});

</script>

<style type="text/css">

.truecolor {border:1px solid #333;text-align:center;}

.truecolor th {background-color:#333; color:#FFF;}

.color1 {background-color:#DDD; color:#333;}

.color2 {background-color:#EEE; color:#333;}

.color3 {background-color:#666; color:#FFF;}

</style>

</head>

<body>

<table width="450" class="truecolor">

  <thead>

    <tr>

      <th>博客</th>

      <th>作者</th>

      <th>网址</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>风格之舞</td>

      <td>火德</td>

      <td>隔行换色</td>

    </tr>

    <tr>

      <td>赵雷的博客</td>

      <td>赵雷</td>

      <td>新浪微博</td>

    </tr>

    <tr>

      <td>寂寞广场</td>

      <td>魏春亮</td>

      <td>同学录</td>

    </tr>

    <tr>

      <td>淘宝UED</td>

      <td>淘宝</td>

      <td>经常购物</td>

    </tr>

  </tbody>

</table>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
js倒计时小程序
Nov 05 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 #Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 #Javascript
JQuery操作元素的css样式
Mar 09 #Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 #Javascript
jquery获取及设置outerhtml的方法
Mar 09 #Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 #Javascript
jquery滚动加载数据的方法
Mar 09 #Javascript
You might like
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
实例讲解Python3中abs()函数
2019/02/19 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
市场部岗位职责范本
2015/04/15 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Redis基本数据类型List常用操作命令
2022/06/01 Redis