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

asp批量修改记录的代码

Jun 25 Javascript

js 数组操作代码集锦

Apr 28 Javascript

JS上传前预览图片实例

Mar 25 Javascript

jQuery获得IE版本不准确webbrowser的解决方法

Feb 23 Javascript

window.location.href IE下跳转失效的解决方法

Mar 27 Javascript

javascript 闭包详解

Feb 15 Javascript

jQuery实现菜单式图片滑动切换

Mar 14 Javascript

js常用的继承--组合式继承

Mar 06 Javascript

用POSTMAN发送JSON格式的POST请求示例

Sep 04 Javascript

ng-zorro-antd 入门初体验

Dec 03 Javascript

微信jssdk踩坑之签名错误invalid signature

May 19 Javascript

JS数组reduce()方法原理及使用技巧解析

Jul 14 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制作静态网站的模板框架(四)

2006/10/09 PHP

php db类库进行数据库操作

2009/03/19 PHP

php中$this-&gt;含义分析

2009/11/29 PHP

由php中字符offset特征造成的绕过漏洞详解

2017/07/07 PHP

基于win2003虚拟机中apache服务器的访问

2017/08/01 PHP

yii框架redis结合php实现秒杀效果(实例代码)

2017/10/26 PHP

PHP 文件写入和读取操作实例详解【必看篇】

2019/11/04 PHP

document.write()及其输出内容的样式、位置控制

2013/08/12 Javascript

javascript的函数作用域

2014/11/12 Javascript

JavaScript自定义数组排序方法

2015/02/12 Javascript

jQuery打字效果实现方法(附demo源码下载)

2015/12/18 Javascript

js文件中直接alert()中文出来的是乱码的解决方法

2016/11/01 Javascript

浅谈在Vue-cli里基于axios封装复用请求

2017/11/06 Javascript

微信小程序发送短信验证码完整实例

2019/01/07 Javascript

JavaScript继承与聚合实例详解

2019/01/22 Javascript

layui 实现表格某一列显示图标

2019/09/19 Javascript

vue组件中节流函数的失效的原因和解决方法

2020/12/02 Vue.js

[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08

2020/11/11 DOTA

pydev使用wxpython找不到路径的解决方法

2013/02/10 Python

python关键字and和or用法实例

2015/05/28 Python

详解Python的Django框架中的Cookie相关处理

2015/07/22 Python

python爬虫中get和post方法介绍以及cookie作用

2018/02/08 Python

python使用Plotly绘图工具绘制气泡图

2019/04/01 Python

python数组循环处理方法

2019/08/26 Python

python使用opencv在Windows下调用摄像头实现解析

2019/11/26 Python

使用 tf.nn.dynamic_rnn 展开时间维度方式

2020/01/21 Python

Python 在局部变量域中执行代码

2020/08/07 Python

nohup的用法

2014/08/10 面试题

垃圾回收的优点和原理

2014/05/16 面试题

2013年入党人员的自我鉴定

2013/10/25 职场文书

公司前台接待岗位职责

2013/12/03 职场文书

中学生操行评语大全

2014/04/24 职场文书

中学生思想品德评语

2014/12/31 职场文书

技术负责人岗位职责

2015/02/10 职场文书

2015年库房工作总结

2015/04/30 职场文书

OpenStack虚拟机快照和增量备份实现方法

2022/04/04 Servers