jQuery实现table隔行换色和鼠标经过变色
一、隔行换色
$("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()都可以同时绑定多个事件或分开。
如果table表格是动态添加的 请参阅:http://blog.csdn.net/itmyhome1990/article/details/30245973
jQuery实现table隔行换色和鼠标经过变色的更多相关文章
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- JQuery 表格 隔行换色 和鼠标滑过的样式
$(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...
- table隔行换色
以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...
- JS给TR隔行换色,鼠标经过有动感
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
- js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用
主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
- jQuery_完成表格的隔行换色
表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...
- JS实现自定义工具类,隔行换色、复选框全选、隔行高亮等
很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中 1.隔行换色 2.复选框的全选效果 3.实现表格 ...
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:
随机推荐
- my97 日期控件
官网:http://www.my97.net/ 好多广告啊! 文档地址: http://www.mysuc.com/test/My97DatePicker/
- 专访雷水果国:离1.5K至18K 一个程序猿5每年的成长之路
我只是一个小菜鸟,对于自主学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识.小菜鸟创建了一个群.希望光临本博客的人能够进来交流. 寻 ...
- 多线程学习之三生产者消费者模式Guarded Suspension
Guarded Suspension[生产消费者模式] 一:guarded suspension的参与者--->guardedObject(被防卫)参与者 1.1该 ...
- Object-C面向对象之实现类
Object-C面向对象之实现类 一般涉及到面向对象都会C#,Java都不可避免的涉及到类,C#中类的后缀名是.cs,Java中是.java,Object-C中一般用两个文件描述一个类,后缀名为.h为 ...
- oracle中导入导出数据备份数据库
原文:oracle中导入导出数据备份数据库 数据库所在位置 将数据导出到的文件名 用户名 备份数据库 :exp c ...
- 完整的堆栈JavaScript路(十五)HTML5 focus 扩大 (扩展点)
HTML5 加入辅助管理 focus 产品特点, 有办法获得焦点文档; 页面加载,用户输入(通常由tab债券).和 调用代码focus()功能. HTML5新的属性和方法,辅助管理的重点: docu ...
- Solr安装(Tomcat)
Solr安装(Tomcat) 安装环境 Windows 7 64bit Apache-tomcat-8.0.9-windows-x64 Solr-4.9.0 JDK 1.8.0_05 64bit ...
- 【转】Android实现推送方式解决方案
本文介绍在Android中实现推送方式的基础知识及相关解决方案.推送功能在手机开发中应用的场景是越来起来了,不说别的,就我们手机上的新闻客户端就时不j时的推送过来新的消息,很方便的阅读最新的新闻信息. ...
- FileOutputStream字节输出流和FileInputStream输入流(切记:out是输出到本地中,in是输入到程序中)这里介绍大文件和小文件的读取方式
//FileOutputStream public class FileOutputStreamDemo { /**字节流:适用于任何文件,以字节为单位,进行读写操作 *字节流操作步骤: *1.创 ...
- IOS UI 第八篇:基本UI
实现图片的滚动,并且自动停止在每张图片上 - (void)viewDidLoad{ [super viewDidLoad]; UIScrollView *scrollView = [[U ...