使用简洁的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 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
动手学习无线电
2021/03/10 无线电
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
JS中的继承操作实例总结
2020/06/06 Javascript
Python字符编码与函数的基本使用方法
2017/09/30 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
.NET程序员的几道面试题
2012/06/01 面试题
2014学雷锋活动心得体会
2014/03/10 职场文书
超市开店计划书
2014/04/26 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
岗位职责范本大全
2015/02/26 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
Python+Appium实现自动抢微信红包
2021/05/21 Python
浅谈Python数学建模之线性规划
2021/06/23 Python
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android