编程 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 相关文章推荐

json 定义

Jun 10 Javascript

js onclick事件传参讲解

Nov 06 Javascript

深入解析JavaScript的闭包机制

Oct 20 Javascript

js判断图片加载完成后获取图片实际宽高的方法

Feb 25 Javascript

如何利用Promises编写更优雅的JavaScript代码

May 17 Javascript

Vuejs第九篇之组件作用域及props数据传递实例详解

Sep 05 Javascript

微信小程序列表的上拉加载和下拉刷新的实现

Apr 01 Javascript

深入剖析Express cookie-parser中间件实现示例

Feb 01 Javascript

快速处理vue渲染前的显示问题

Mar 05 Javascript

基于JavaScript实现每日签到打卡轨迹功能

Nov 29 Javascript

JavaScript进阶（一）变量声明提升实例分析

May 09 Javascript

vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

Sep 12 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

十大催泪虐心动漫电影，有几部你还没看

2020/03/04 日漫

PHP实现抓取Google IP并自动修改hosts文件

2015/02/12 PHP

php使用APC实现实时上传进度条功能

2015/10/26 PHP

PHP异常处理Exception类

2015/12/11 PHP

javascript中使用replaceAll()函数实现字符替换的方法

2010/12/25 Javascript

javascript开发随笔一 preventDefault的必要

2011/11/25 Javascript

初学Jquery插件制作在SageCRM的查询屏幕隐藏部分行的功能

2011/12/26 Javascript

JavaScript日期时间格式化函数分享

2014/05/05 Javascript

基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统

2015/12/03 Javascript

第二章之Bootstrap 页面排版样式

2016/04/25 Javascript

JS实现仿百度文库评分功能

2017/01/12 Javascript

bootstrap是什么_动力节点Java学院整理

2017/07/14 Javascript

微信小程序页面间值传递的两种方法

2018/11/26 Javascript

小程序云开发获取不到数据库记录的解决方法

2019/05/18 Javascript

[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19

2018/08/21 DOTA

Python sys.path详细介绍

2013/10/17 Python

Python random模块（获取随机数）常用方法和使用例子

2014/05/13 Python

Python中暂存上传图片的方法

2015/02/18 Python

Java Web开发过程中登陆模块的验证码的实现方式总结

2016/05/25 Python

Python程序打包工具py2exe和PyInstaller详解

2019/06/28 Python

python带参数打包exe及调用方式

2019/12/21 Python

python实现凯撒密码、凯撒加解密算法

2020/06/11 Python

使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

2016/06/28 HTML / CSS

HTML5 body设置自适应全屏

2020/05/07 HTML / CSS

美国优质宠物用品购买网站：Muttropolis

2020/02/17 全球购物

什么是跨站脚本攻击

2014/12/11 面试题

remote接口和home接口主要作用

2013/05/15 面试题

企划主管岗位职责

2013/12/12 职场文书

工程质量承诺书

2014/03/27 职场文书

企业授权委托书范本

2014/04/02 职场文书

本科毕业生自荐信

2014/06/02 职场文书

副校长竞聘演讲稿

2014/09/01 职场文书

官僚主义现象查摆问题整改措施

2014/10/04 职场文书

好段摘抄大全（48句）

2019/08/08 职场文书

详解MySql中InnoDB存储引擎中的各种锁

2022/02/12 MySQL

Python中time与datetime模块使用方法详解

2022/03/31 Python