当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 代码如下: 隔行换色                body,table,td, {            font-family:Arial, Helvetica, sans-serif;            font-size:12px;        }        .h {    ...

今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下:

代码如下:





 隔行换色
   
   
        body,table,td, {
            font-family:Arial, Helvetica, sans-serif;
            font-size:12px;
        }
        .h {
            background:#f3f3f3;
            color:#000;
        }
        .c {
            background:#ebebeb;
            color:#000;
        }
   



   
       
           
               
               
               
           
           
               
               
               
           
           
               
               
               
           
           
               
               
               
           
           
               
               
               
           
           
               
               
               
           
           
               
               
               
           
       
   



第一种比较复杂的方法:
代码如下:

  $(function()
    {
        $("#table tr").hover(function()
        {
            $(this).addClass("h");
        },function()
        {
            $(this).removeClass("h");
        })
        $("input").click(function()
        {
            if($(this).attr("checked"))
            {
                $(this).closest("tr").addClass("c");
            }
            else
            {
                $(this).closest("tr").removeClass("c");
            }
        })
    })

第二种比较简单的方法:

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。

代码如下:

    $(function(){
        $("#table tr").hover(function(){
          $(this).toggleClass("h");
        })
        $("input").click(function(){
            var d = $(this);
            d.closest('tr').toggleClass("c",d.attr("checked")) ;
        })
    })





    
 
 

您可能感兴趣的文章:

  • sharepoint 2010 使用STSNavigate函数实现文件下载举例
  • 弱智问题:我们怎么才知道要使用的方法需要实现什么接口才能使用这个方法呢?
  • 使用java jdk中的LinkedHashMap实现简单的LRU算法
  • 请问谁能讲讲使用软件实现的mcu原理。
  • 在Python3中使用urllib实现http的get和post提交数据操作
  • 可不可以在程序中直接使用ftp客户端的函数实现文件传输?
  • 使用libpcap实现抓包程序的步骤及代码示例
  • 如何使用http协议实现流媒体的传输?
  • juqery的python实现:pyquery学习使用教程
  • 使用JavaScript实现的Flash运行环境 Gordon
  • 使用Applet能不能实现基于浏览器的打印呢???
  • 请问使用或安装什么软件能够实现Win2000下访问Linux分区?
  • 急急!!!高分求助,关于实现LINUX软件的使用限制问题
  • 在ACC下不使用循环怎样实现,读取文件指定行的数据.
  • 请教使用openobex库实现蓝牙传输的问题
  • 如何使用shell文件实现linux环境下的挂载功能,具体代码!!
  • Linux下的Socket通信如何断开连接的端口从而实现重复使用该端口
  • 怎样在不使用offices产品开启WORD下实现将WORD内容转化为图片的格式
  • python使用循环实现批量创建文件夹示例
  • 使用实现状态栏?
  • 编程语言 iis7站长之家
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 请问在红旗Linux多功能服务器版上(不是数据库服务器版)能否正常安装使用Oracle?红旗Linux数据库服务器版要比红旗Linux多功能服务器版贵
  • RedHat Linux8与9的在使用和功能上有何差别?
  • 如何使用RedHat AS4 中的集群功能?
  • 请高人指点,busybox使用不同链接名实现不同功能的原理?
  • 可以使用shell编程完成发送邮件的功能吗?
  • 如何不使用expect而作出expect最简单的功能?
  • 急,在Linux-2.6.10下,qos功能的使用。
  • 如何使用HP的ILO远程功能?
  • LINUX中实现单实例功能使用哪种IPC好啊?
  • 使用python实现strcmp函数功能示例
  • 如何使用UNIX语句来实现这个功能? 高手来看下
  • 请问有没头函数<pthread.h>和<signal.h>里的函数的详细功能介绍?和使用方法???
  • cygwin下使用 service iptables 和ifconfig功能
  • 怎么样使用GPIO的功能?
  • 从sun网站下的solaris Sparc版,有没有功能和使用时间的限制?
  • 使用jms可以实现自己开发的系统中的广播功能吗?各位有没有什么其他的好方法
  • 怎样使用window.open打开窗口并使其兼有submit表单提交的功能!急!
  • c#不使用系统api实现可以指定区域屏幕截屏功能
  • 在使用JDK1.4的正则表达式功能时,发现如果被搜索的字符太多,例如一篇文章.就会报错
  • 使用pdfbox实现pdf文本提取和合并功能示例
  • C++ I/O 成员 tellg():使用输入流读取流指针
  • 在测试memset函数的执行效率时,分为使用Cash和不使用Cash辆种方式,该如何控制是否使用缓存?
  • C++ I/O 成员 tellp():使用输出流读取流指针
  • 求ibm6000的中文使用手册 !从来没用过服务器,现在急需使用它,不知如何使用! 急!!!!!
  • Python不使用print而直接输出二进制字符串
  • 请问:在使用oracle数据库作开发时,是使用pro*c作开发好些,还是使用库函数如oci等好一些啊?或者它们有什么区别或者优缺点啊?
  • Office 2010 Module模式下使用VBA Addressof
  • 急求结果!!假设一个有两个元素的信号量集S,表示了一个磁带驱动器系统,其中进程1使用磁带机A,进程2同时使用磁带机A和B,进程3使用磁带机B。
  • windows下tinyxml.dll下载安装使用(c++解析XML库)
  • c#中SAPI使用总结——SpVoice的使用方法
  • tcmalloc内存泄露优化c++开源库下载,安装及使用介绍


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3