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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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中获取url与物理路径的总结
2013/06/21 PHP
微信支付开发维权通知实例
2016/07/12 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
javascript编程起步(第六课)
2007/02/27 Javascript
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
axios异步提交表单数据的几种方法
2019/08/11 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python机器学习实战之树回归详解
2017/12/20 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
领导的自我鉴定
2013/12/28 职场文书
运动会拉拉队口号
2014/06/09 职场文书
员工年终考核评语
2014/12/31 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技