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


Posted in Javascript onJanuary 02, 2014

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
 <title>隔行换色</title>
    <script src="js/jquery-1.4.2.min.js"></script>
    <style type="text/css">
        body,table,td, {
            font-family:Arial, Helvetica, sans-serif;
            font-size:12px;
        }
        .h {
            background:#f3f3f3;
            color:#000;
        }
        .c {
            background:#ebebeb;
            color:#000;
        }
    </style>
</head>
<body>
<div id="aaa">
    <form>
        <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
            <tr>
                <td width="30" align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
                <td>三水点靠木</td>
                <td>三水点靠木</td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox"  /></td>
                <td>三水点靠木</td>
                <td>三水点靠木</td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
                <td>三水点靠木</td>
                <td>三水点靠木</td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
                <td>三水点靠木</td>
                <td>三水点靠木</td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
                <td>三水点靠木</td>
                <td>三水点靠木</td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
                <td>三水点靠木</td>
                <td>三水点靠木</td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" name="checkbox" class="check1" value="checkbox" /></td>
                <td>三水点靠木</td>
                <td>三水点靠木</td>
            </tr>
        </table>
    </form>
</div>
<script>

第一种比较复杂的方法:
  $(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")) ;
        })
    })
</script>
</body>
</html>

Javascript 相关文章推荐
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
js清理Word格式示例代码
Feb 13 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
JS实现简单打字测试
Jun 24 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 #Javascript
js/jQuery简单实现选项卡功能
Jan 02 #Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 #Javascript
js判断字符长度以及中英文数字等
Dec 31 #Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 #Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 #Javascript
js类式继承的具体实现方法
Dec 31 #Javascript
You might like
19个超实用的PHP代码片段
2014/03/14 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
jQuery常用数据处理方法小结
2015/02/20 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
开会迟到检讨书
2014/01/08 职场文书
初中同学聚会感言
2014/02/11 职场文书
2014年质量工作总结
2014/11/22 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题