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 相关文章推荐
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
微信小程序前端promise封装代码实例
Aug 24 Javascript
js单线程的本质 Event Loop解析
Oct 29 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写的AES加密解密类分享
2014/06/20 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
canvas绘制七巧板
2017/02/03 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python模块restful使用方法实例
2013/12/10 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
医院检讨书范文
2014/02/01 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
文明工地标语
2014/06/16 职场文书
平面设计师岗位职责
2014/09/18 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
MyBatis 动态SQL全面详解
2021/10/05 MySQL