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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
深入分析javascript中console命令
Aug 14 Javascript
小程序自定义日历效果
Dec 29 Javascript
js的对象与函数详解
Jan 21 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
如何获得PHP相关资料
2006/10/09 PHP
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
linux中cd命令使用详解
2015/01/08 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
JQuery 入门实例1
2009/06/25 Javascript
Js基础学习资料
2010/11/23 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
小学教师节活动方案
2014/01/31 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
毕业生党员个人总结
2015/02/14 职场文书
保研推荐信范文
2015/03/25 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
浅谈Node的内存泄露问题
2022/05/06 NodeJs