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非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
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 批量删除数据的方法分析
2009/10/30 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
总监职责范文
2013/11/09 职场文书
公司经理任命书
2014/06/05 职场文书
保险专业求职信
2014/07/07 职场文书
党员志愿者活动方案
2014/08/28 职场文书
出差报告格式模板
2014/11/06 职场文书