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

用JQuery 实现的自定义对话框

Mar 24 Javascript

JavaScript中两种链式调用实现代码

Jan 12 Javascript

jQuery中将函数赋值给变量的调用方法

Mar 23 Javascript

YUI Compressor压缩JavaScript原理及微优化

Jan 07 Javascript

javascript两种function的定义介绍及区别说明

May 02 Javascript

jQuery+ajax实现动态执行脚本的方法

Jan 27 Javascript

javascript与css3动画结合使用小结

Mar 11 Javascript

jQuery图片轮播滚动切换代码分享

Apr 20 Javascript

JavaScript中Number对象的toFixed() 方法详解

Sep 02 Javascript

bootstrap可编辑下拉框jquery.editable-select

Oct 12 jQuery

深入分析jQuery.one() 函数

Jun 03 jQuery

js实现前端界面导航栏下拉列表

Aug 27 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简单系统数据添加以及数据删除模块源文件下载

2008/06/07 PHP

PHP实现把数字ID转字母ID

2013/08/12 PHP

php中实现可以返回多个值的函数实例

2015/03/21 PHP

详解PHP中的null合并运算符

2015/12/30 PHP

PHP实现动态执行代码的方法

2016/03/25 PHP

PHP之图片上传类实例代码(加了缩略图)

2016/06/30 PHP

PHP生成二维码与识别二维码的方法详解【附源码下载】

2019/03/07 PHP

使两个iframe的高度与内容自适应,且相等

2006/11/20 Javascript

ExtJS4利根据登录后不同的角色分配不同的树形菜单

2014/05/02 Javascript

微信公众平台开发教程（六）获取个性二维码的实例

2016/12/02 Javascript

jQuery实现弹出窗口弹出div层的实例代码

2017/01/09 Javascript

vue表单绑定实现多选框和下拉列表的实例

2017/08/12 Javascript

js实现网页的两个input标签内的数值加减(示例代码)

2017/08/15 Javascript

微信小程序页面滑动事件的实例详解

2017/10/12 Javascript

JavaScript 日期时间选择器一些小结

2018/04/02 Javascript

vue项目中,main.js,App.vue,index.html的调用方法

2018/09/20 Javascript

vue-cli项目配置多环境的详细操作过程

2018/10/30 Javascript

vue 函数调用加括号与不加括号的区别

2020/10/29 Javascript

由浅入深讲解python中的yield与generator

2017/04/05 Python

详解利用OpenCV提取图像中的矩形区域（PPT屏幕等）

2019/07/01 Python

python中下标和切片的使用方法解析

2019/08/27 Python

django 读取图片到页面实例

2020/03/27 Python

Python利用Faiss库实现ANN近邻搜索的方法详解

2020/08/03 Python

Python常用模块函数代码汇总解析

2020/08/31 Python

HTML5 Canvas自定义圆角矩形与虚线示例代码

2013/08/02 HTML / CSS

台湾森森购物网：U-mall

2017/10/16 全球购物

strlen的几种不同实现方法

2013/05/31 面试题

数组越界问题

2015/10/21 面试题

数学系毕业生的自我评价

2014/01/10 职场文书

旺仔牛奶广告词

2014/03/20 职场文书

请假条的格式

2014/04/11 职场文书

产品陈列协议书（标准版）

2014/09/17 职场文书

一年级班主任工作总结2014

2014/11/08 职场文书

小学作文指导之如何写人？

2019/07/08 职场文书

Java Kafka 消费积压监控的示例代码

2021/07/01 Java/Android

微信小程序纯CSS实现无限弹幕滚动效果

2022/09/23 HTML / CSS