jQuery实现table隔行换色和鼠标经过变色的两种方法


Posted in Javascript onJune 15, 2014

一、隔行换色

$("tr:odd").css("background-color","#eeeeee"); 
$("tr:even").css("background-color","#ffffff");

或者一行搞定:
$("table tr:nth-child(odd)").css("background-color","#eeeeee");

:nth-child 匹配其父元素下的第N个子或奇偶元素

二、鼠标经过变色

$("tr").live({ 
mouseover:function(){ 
$(this).css("background-color","#eeeeee"); 
}, 
mouseout:function(){ 
$(this).css("background-color","#ffffff"); 
} 
})

或者
$("tr").bind("mouseover",function(){ 
$(this).css("background-color","#eeeeee"); 
}) 
$("tr").bind("mouseout",function(){ 
$(this).css("background-color","#ffffff"); 
})

当然live()和bind()都可以同时绑定多个事件或分开。
Javascript 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
JS Attribute属性操作详解
May 19 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 #Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 #Javascript
jQuery $.extend()用法总结
Jun 15 #Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 #Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 #Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 #Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 #Javascript
You might like
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
django中的数据库迁移的实现
2020/03/16 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
vue路由实现登录拦截
2021/03/24 Vue.js
小学生学雷锋演讲稿
2014/04/25 职场文书
医德医风自我评价
2014/09/19 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
python中opencv实现图片文本倾斜校正
2021/06/11 Python
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python