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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
vue.js开发环境搭建教程
May 04 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
isset和empty的区别
2007/01/15 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
js获取单选框或复选框值及操作
2012/12/18 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
javascript中this关键字详解
2016/12/12 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
vue实现计算器功能
2020/02/22 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
python二维列表一维列表的互相转换实例
2018/07/02 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
异常和异常类的概念
2014/09/12 面试题
管事部库房保管员岗位职责
2014/02/21 职场文书
法律七进实施方案
2014/03/15 职场文书
个人综合鉴定材料
2014/05/23 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL