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 禁止复制网页
Jun 11 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
javascript操作excel生成报表示例
May 08 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 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网站备份程序代码分享
2011/06/10 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python创建和删除目录的方法
2015/04/29 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
浅析Python数据处理
2018/05/02 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
英文自荐信常用句子
2014/03/26 职场文书
通知书大全
2015/04/27 职场文书
人事任命书范本
2015/09/21 职场文书
2016新年晚会开场白
2015/12/03 职场文书
Django显示可视化图表的实践
2021/05/10 Python