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 attachEvent和addEventListener使用方法
Mar 19 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
JavaScript fetch接口案例解析
Aug 30 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
python显示天气预报
2014/03/02 Python
Python跳出循环语句continue与break的区别
2014/08/25 Python
用Python编写web API的教程
2015/04/30 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python中类的初始化特殊方法
2017/12/01 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Python延时操作实现方法示例
2018/08/14 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
python离线安装外部依赖包的实现
2020/02/13 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
教师党员思想汇报
2014/01/06 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
交通安全月活动总结
2015/05/08 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers