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中哈希表的几种用法总结
Jan 28 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
在Python的循环体中使用else语句的方法
2015/03/30 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
Python虚拟环境venv用法详解
2020/05/25 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Python正则表达式如何匹配中文
2020/05/27 Python
pycharm导入源码的具体步骤
2020/08/04 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
《画风》教学反思
2014/04/16 职场文书
大学生新学期计划书
2014/04/28 职场文书
安全生产月演讲稿
2014/05/09 职场文书
我是特种兵观后感
2015/06/11 职场文书
童年读书笔记
2015/06/26 职场文书