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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
node.js从数据库获取数据
May 08 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
JS中数据结构之栈
2019/01/01 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
Python遍历pandas数据方法总结
2018/02/09 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Python面向对象封装操作案例详解
2019/12/31 Python
python计算二维矩形IOU实例
2020/01/18 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
python如何支持并发方法详解
2020/07/25 Python
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
就业协议书
2014/09/12 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书