使用jquery hover事件实现表格的隔行换色功能示例_jquery

jQuery hover事件

hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。

参数:
over (Function) : 鼠标移到元素上要触发的函数
out (Function): 鼠标移出元素要触发的函数

示例:
鼠标悬停的表格加上特定的类

jQuery 代码:

复制代码 代码如下:

$(".table_list tr").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}

);

这里自己注意几点:

1,.hover是个类,想要什么效果自己写。

2,别忘记引入jquery.js文件,要不然不起作用还报错。

3,相比于传统的css,比如this.bgColor='red'这样的方式,简单很多了,不需要再一行行添加了。

4,当然可以实现奇偶行效果不同,读者自己去研究吧。

今日发现一个更为简单的办法,就是使用jquery的each方法,这个只需要一行代码既可以实现隔行换色效果。只不过不会随着鼠标的移动而变化罢了。

复制代码 代码如下:

$(".tablist tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]});

时间: 2024-09-02 20:48:35

使用jquery hover事件实现表格的隔行换色功能示例_jquery的相关文章

使用简洁的jQuery方法实现隔行换色功能

 本篇文章主要介绍了使用简洁的jQuery方法实现隔行换色功能.需要的朋友可以过来参考下,希望对大家有所帮助 今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下:   代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">  <title>隔行换色</title>     <script src="js/jquery-

使用简洁的jQuery方法实现隔行换色功能_jquery

今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>隔行换色</title>    <script src="js/jquery-1.4.2.min.js"></script>    <style type=&

2种方法实现CSS LI隔行换色

  CSS隔行变色使用率挺高的,今天抽空写了这篇简短的教程,教给CSS不顺手的初级学者两种方法实现CSS的隔行换色功能.大家知道,隔行换色的对象一般是TABle或Li,Table就不说了,个人觉得已经过时了,主要来说下CSS Li的隔行换色,直接放代码吧. 第一种方法: 这种方法看上去是纯CSS,不过这里使用了expression,等同于半个JavaScript,这种方法简单,不过CSS的expression貌似存在一些兼容性问题,所以这个功能仅用于看重IE的用户. 第二种方法:CSS和JS结合

表格隔行换色js和jquery的实现方法

下面介绍一下关于表格隔行换色的方法,我们先来介绍一下关于jquery的方法,然后 简单的介绍一下js的实现方法.    代码如下 复制代码 <script type="text/javascript"> $(document).ready(function(){  $(".table tr").mouseover(function(){ //如果鼠标移到class为table的表格的tr上时,执行函数 $(this).addClass("hov

jQuery hover事件简单实现同时绑定2个方法_jquery

本文实例讲述了jQuery hover事件简单实现同时绑定2个方法.分享给大家供大家参考,具体如下: 这里将hover事件同时挂2个方法: 1个是悬停的时候执行的,另外一个是离开的时候执行 代码如下: $(document).ready(function() { $("#orderedlist li").hover( function() {$(this).addClass("blue");}, function() {$(this).removeClass(&qu

jquery实现表格隔行换色效果_jquery

本文实例讲述了jquery实现表格隔行换色效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 1.新建一个web项目,jQuery: 2.在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中: 3.同样,新建TableColor.html:TableColor.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

【java Itext Pdf】itext pdf隔行换色 itext5添加表格背景颜色

Itext5 pdf 行变色效果图: 新需求,隔行换色,itext in action 是个很好的说明书,照着英文读下来,很简单的进行了实现,思路如下:   1.先创建PdfPTable对象,生成PDF表格cell之后,添加隔行换色的事件,将此事件在PdfPTable加入Document对象之前,插入进去 2.隔行换色的事件需要自己写一个java类,里面去定义背景颜色和长宽高,实质就是在pdf表格生成之后,去读取当页page内的所有行和列,并创建一个矩形,加入背景,覆盖到cell内,达到背景有颜

Excel表格中隔行填充色的方法

  Excel表格中隔行填充色的方法           操作方法是,点击数据区域任意单元格,[插入][表格] 以上插入表格的步骤也可以按快捷键[Ctrl+T]来完成,更方便快捷. 并且可以通过设置表格样式,更换表格的颜色. 除此之外,还有一种方法是利用条件格式完成. 选中数据区域,依次单击[开始][条件格式][新建规则][使用公式确定要设置格式的单元格],输入以下公式: =MOD(ROW(),2) =MOD(ROW(),2)这个公式的意思想必大家都知道吧? 简单说一下:ROW()函数返回公式所

Dreamweaver表格以及列表隔行换色的js效果代码

Dreamweaver表格以及列表隔行换色的js效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv