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

JS网页图片按比例自适应缩放实现方法

Jan 15 Javascript

js sort 二维数组排序的用法小结

Jan 24 Javascript

IE8下Jquery获取select选中的值post到后台报错问题

Jul 02 Javascript

EasyUI中在表单提交之前进行验证

Jul 19 Javascript

BootStrap的table表头固定tbody滚动的实例代码

Aug 24 Javascript

基于vue实现分页/翻页组件paginator示例

Mar 09 Javascript

js通过Date对象实现倒计时动画效果

Oct 27 Javascript

快速解决angularJS中用post方法时后台拿不到值的问题

Aug 14 Javascript

Vue 监听列表item渲染事件方法

Sep 06 Javascript

vue中子组件传递数据给父组件的讲解

Jan 27 Javascript

vue-router跳转时打开新页面的两种方法

Jul 29 Javascript

JavaScript实现秒杀时钟倒计时

Sep 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 foreach循环使用详解与实例代码

2010/05/08 PHP

smarty模板判断数组为空的方法

2015/06/10 PHP

js活用事件触发对象动作

2008/08/10 Javascript

根据鼠标的位置动态的控制层的位置

2009/11/24 Javascript

JavaScript Array Flatten 与递归使用介绍

2011/10/30 Javascript

JavaScript中的操作符==与===介绍

2014/12/31 Javascript

JS运动框架之分享侧边栏动画实例

2015/03/03 Javascript

JavaScript实现仿网易通行证表单验证

2015/05/25 Javascript

JavaScript 经典实例日常收集整理(常用经典)

2016/03/30 Javascript

Jquery实现$.fn.extend和$.extend函数

2016/04/14 Javascript

jQuery如何解决IE输入框不能输入的问题

2016/10/08 Javascript

最实用的jQuery分页插件

2016/10/09 Javascript

如何抽象一个Vue公共组件

2017/10/17 Javascript

JS实现获取当前所在周的周六、周日示例分析

2019/05/11 Javascript

nodejs二进制与Buffer的介绍与使用

2019/07/11 NodeJs

Python算法之栈（stack）的实现

2014/08/18 Python

快速了解Python开发中的cookie及简单代码示例

2018/01/17 Python

解决Atom安装Hydrogen无法运行python3的问题

2019/08/28 Python

python数据分析工具之 matplotlib详解

2020/04/09 Python

设置jupyter中DataFrame的显示限制方式

2020/04/12 Python

Python PyQt5运行程序把输出信息展示到GUI图形界面上

2020/04/27 Python

Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)

2020/07/07 Python

解决pyinstaller 打包exe文件太大，用pipenv 缩小exe的问题

2020/07/13 Python

PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)

2020/09/24 Python

css3学习心得分享

2013/08/19 HTML / CSS

HTML5实现QQ聊天气泡效果

2017/06/26 HTML / CSS

西班牙购买隐形眼镜、眼镜和太阳镜网站：Lentiamo.es

2020/06/11 全球购物

写给女朋友的道歉信

2014/01/12 职场文书

三年大学生活自我鉴定

2014/01/21 职场文书

致地震灾区的慰问信

2015/03/23 职场文书

2015年重阳节活动总结

2015/03/24 职场文书

2015年电信员工工作总结

2015/05/26 职场文书

新年晚会开场白

2015/05/29 职场文书

2015年重阳节主持词

2015/07/04 职场文书

六年级作文之家庭作文

2019/12/12 职场文书

sql查询结果列拼接成逗号分隔的字符串方法

2021/05/25 SQL Server