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 相关文章推荐
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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 microtime获取浮点的时间戳
2010/02/21 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
php 多个变量指向同一个引用($b = &$a)用法分析
2019/11/13 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
python3跳出一个循环的实例操作
2020/08/18 Python
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
婚庆答谢词
2015/01/04 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
收入证明申请书
2015/06/12 职场文书
会计岗位工作总结
2015/08/12 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL