使用简洁的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效率 一次判断,而不要次次判断
Mar 30 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JavaScript设计模式初探
Jan 07 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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 图像尺寸调整代码
2010/05/26 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
大学团支书的自我评价分享
2013/12/14 职场文书
运动会广播稿30字
2014/01/21 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
个人剖析材料范文
2014/09/30 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
放飞理想主题班会
2015/08/14 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
Django实现聊天机器人
2021/05/31 Python