使用简洁的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 07 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 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 高手之路(三)
2006/10/09 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
php微信开发之百度天气预报
2016/11/18 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
js实现轮播图特效
2020/05/28 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python之用户输入的实例
2018/06/22 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
求职简历中自我评价
2014/01/28 职场文书
初中英语演讲稿
2014/04/29 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
宪法宣传标语100条
2019/10/15 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript