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