编程 Javascript

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程序设计有所帮助。

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

- Author -

hcqenjoy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 图片等比例缩放代码

May 13 Javascript

javascript 词法作用域和闭包分析说明

Aug 12 Javascript

javascript中方便增删改cookie的一个类

Oct 11 Javascript

javascript中验证大写字母、数字和中文

Jan 15 Javascript

用队列模拟jquery的动画算法实例

Jan 20 Javascript

jQuery实现跨域iframe接口方法调用

Mar 14 Javascript

jQuery实现页面滚动时动态加载内容的方法

Mar 20 Javascript

AngularJS ng-blur 指令详解及简单实例

Jul 30 Javascript

vue生成token保存在客户端localStorage中的方法

Oct 25 Javascript

arctext.js实现文字平滑弯曲弧形效果的插件

May 13 Javascript

vue 中的 render 函数作用详解

Feb 28 Javascript

JavaScript实现弹出窗口效果

Dec 09 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

3种php生成唯一id的方法

2015/11/23 PHP

PHP排序算法之简单选择排序(Simple Selection Sort)实例分析

2018/04/20 PHP

PHP实现数组根据某个单元字段排序操作示例

2018/08/01 PHP

php基于协程实现异步的方法分析

2019/07/17 PHP

Yii使用DbTarget实现日志功能的示例代码

2020/07/21 PHP

jQuery 相关控件的事件操作分解

2009/08/03 Javascript

js函数调用常用方法详解

2012/12/03 Javascript

jquery特效幻灯片效果示例代码

2013/07/16 Javascript

利用jQuery实现滑动开关按钮效果（附demo源码下载）

2017/02/07 Javascript

jQuery实现web页面樱花坠落的特效

2017/06/01 jQuery

微信小程序使用component自定义toast弹窗效果

2018/11/27 Javascript

element中的$confirm的使用

2020/04/26 Javascript

JavaScript实现移动端弹窗后禁止滚动

2020/05/25 Javascript

[02:12]2019完美世界全国高校联赛（春季赛）报名开启

2019/03/01 DOTA

python中使用pyhook实现键盘监控的例子

2014/07/18 Python

Python的加密模块md5、sha、crypt使用实例

2014/09/28 Python

玩转python爬虫之URLError异常处理

2016/02/17 Python

浅析Python数据处理

2018/05/02 Python

Python之pymysql的使用小结

2019/07/01 Python

Python的bit_length函数来二进制的位数方法

2019/08/27 Python

基于Python实现签到脚本过程解析

2019/10/25 Python

利用python生成照片墙的示例代码

2020/04/09 Python

python设置表格边框的具体方法

2020/07/17 Python

Python操作Elasticsearch处理timeout超时

2020/07/17 Python

Python 数据的累加与统计的示例代码

2020/08/03 Python

python excel和yaml文件的读取封装

2021/01/12 Python

css 如何让背景图片拉伸填充避免重复显示

2013/07/11 HTML / CSS

浅析移动设备HTML5页面布局

2015/12/01 HTML / CSS

什么时候用assert

2015/05/08 面试题

《傅雷家书》教学反思

2014/04/20 职场文书

绿色环保演讲稿

2014/05/10 职场文书

植物生产学专业求职信

2014/08/08 职场文书

验房委托书

2014/08/30 职场文书

健康状况证明模板

2014/10/23 职场文书

Python代码，能玩30多款童年游戏！这些有几个是你玩过的

2021/04/27 Python

海康机器人重磅发布全新算法开发平台VM4.2

2022/04/21 数码科技