使用简洁的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 相关文章推荐
javascript 无提示关闭窗口脚本
Aug 17 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
vue实现列表拖拽排序的功能
Nov 02 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
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Move.js入门
2017/02/08 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
PyCharm代码格式调整方法
2018/05/23 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
会议通知格式范文
2015/04/15 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python