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