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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
May 30 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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
深入apache host的配置详解
2013/06/09 PHP
PHP开发注意事项总结
2015/02/04 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
javascript 写类方式之十
2009/07/05 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
js设置默认时间跨度过程详解
2019/07/17 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
vuex入门最详细整理
2020/03/04 Javascript
python多线程http下载实现示例
2013/12/30 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
农村婚礼主持词
2014/03/13 职场文书
继承公证书
2014/04/09 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
上党课的心得体会
2014/09/02 职场文书
2015年试用期工作总结
2014/12/12 职场文书
大学生毕业个人总结
2015/02/15 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android