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中判断文本框是否为空的两种方法
Jul 31 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
Feb 23 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
js面向对象之实现淘宝放大镜
Jan 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下载远程文件类(支持断点续传)
2008/11/14 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
python超时重新请求解决方案
2019/10/21 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
python 写一个性能测试工具(一)
2020/10/24 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
致百米运动员广播稿
2014/01/29 职场文书
校庆团日活动总结
2014/08/28 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技