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

前端技术 2023/09/04 JavaScript

今天用一种简洁的方法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>phpstudy</td>
                <td>phpstudy</td>
            </tr>
            <tr>
                <td align=\"center\"><input type=\"checkbox\" name=\"checkbox\" class=\"check1\" value=\"checkbox\"  /></td>
                <td>phpstudy</td>
                <td>phpstudy</td>
            </tr>
            <tr>
                <td align=\"center\"><input type=\"checkbox\" name=\"checkbox\" class=\"check1\" value=\"checkbox\" /></td>
                <td>phpstudy</td>
                <td>phpstudy</td>
            </tr>
            <tr>
                <td align=\"center\"><input type=\"checkbox\" name=\"checkbox\" class=\"check1\" value=\"checkbox\" /></td>
                <td>phpstudy</td>
                <td>phpstudy</td>
            </tr>
            <tr>
                <td align=\"center\"><input type=\"checkbox\" name=\"checkbox\" class=\"check1\" value=\"checkbox\" /></td>
                <td>phpstudy</td>
                <td>phpstudy</td>
            </tr>
            <tr>
                <td align=\"center\"><input type=\"checkbox\" name=\"checkbox\" class=\"check1\" value=\"checkbox\" /></td>
                <td>phpstudy</td>
                <td>phpstudy</td>
            </tr>
            <tr>
                <td align=\"center\"><input type=\"checkbox\" name=\"checkbox\" class=\"check1\" value=\"checkbox\" /></td>
                <td>phpstudy</td>
                <td>phpstudy</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>

本文地址：https://www.stayed.cn/item/9593

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案