中段フックの色落ち効果の出し方のご紹介-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

中段フックの色落ち効果の出し方のご紹介

Jul 18, 2017 pm 06:02 PM

変色効果

チェックボックスをクリックしてスタイルを追加し、チェックした行の色の変更効果の実装方法を紹介します。具体的な実装方法は次のとおりです

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;&quot;&gt;
&lt;html xmlns=&quot;&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;table {
            border: 0;
            border-collapse: collapse;
        }

        td {
            font: normal 12px/17px Arial;
            padding: 2px;
            width: 100px;
        }

        th {
            font: bold 12px/17px Arial;
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
        }

        .even {
            background: #FFF38F;
        }/* 偶数行样式*/.odd {
            background: #FFFFEE;
        }/* 奇数行样式*/.selected {
            background: #FF6500;
            color: #fff;
        }&lt;/style&gt;
    &lt;script src=&quot;js/jquery-1.11.3.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;$(function () {
            $("tbody tr:even").addClass("even");
            $("tbody tr:odd").addClass("odd");
            $(":checkbox").change(function () {if ($(this).is(":checked")) {
                    $(this).parents("tr").addClass("selected");
                }else{
                    $(this).parents("tr").removeClass("selected");
                }
            });//初始化默认选中色selected样式$(":checkbox").each(function () {if ($(this).is(":checked")) {
                    $(this).parents("tr").addClass("selected");
                }
            })
        })&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
    &lt;thead&gt;
    &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;姓名&lt;/th&gt;
        &lt;th&gt;性别&lt;/th&gt;
        &lt;th&gt;暂住地&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;
        &lt;td&gt;张山&lt;/td&gt;
        &lt;td&gt;男&lt;/td&gt;
        &lt;td&gt;浙江宁波&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;
        &lt;td&gt;李四&lt;/td&gt;
        &lt;td&gt;女&lt;/td&gt;
        &lt;td&gt;浙江杭州&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot; checked=&#39;checked&#39;/&gt;&lt;/td&gt;
        &lt;td&gt;王五&lt;/td&gt;
        &lt;td&gt;男&lt;/td&gt;
        &lt;td&gt;湖南长沙&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;
        &lt;td&gt;找六&lt;/td&gt;
        &lt;td&gt;男&lt;/td&gt;
        &lt;td&gt;浙江温州&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;
        &lt;td&gt;Rain&lt;/td&gt;
        &lt;td&gt;男&lt;/td&gt;
        &lt;td&gt;浙江杭州&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;
        &lt;td&gt;MAXMAN&lt;/td&gt;
        &lt;td&gt;女&lt;/td&gt;
        &lt;td&gt;浙江杭州&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

//スタイルを追加する行をクリックしてください

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;UTF-8&quot;&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;table {border: 0;border-collapse: collapse;}td {font: normal 12px/17px Arial;padding: 2px;width: 100px;}th {font: bold 12px/17px Arial;text-align: left;padding: 4px;border-bottom: 1px solid #333;}.even {background: #FFF38F;}/* 偶数行样式*/.odd {background: #FFFFEE;}/* 奇数行样式*/.selected {background: #FF6500;color: #fff;}&lt;/style&gt;&lt;script src=&quot;js/jquery-1.11.3.min.js?1.1.11&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;$(function () {
            $("tbody tr:even").addClass("even");
            $("tbody tr:odd").addClass("odd");
            $("tbody tr").click(function () {var hasselect = $(this).hasClass("selected");if (hasselect) {
                    $(this).removeClass("selected");
                    $(this).find("input").attr("checked", false);
                } else {
                    $(this).addClass("selected");
                    $(this).find("input").attr("checked", true);
                }
            })
            $('tbody&gt;tr:has(:checked)').addClass('selected');//            $(":checkbox").each(function () {//                if ($(this).is(":checked")) {//                    $(this).parents("tr").addClass("selected");//                }//            })})&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;姓名&lt;/th&gt;&lt;th&gt;性别&lt;/th&gt;&lt;th&gt;暂住地&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;&lt;td&gt;张山&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;浙江宁波&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;&lt;td&gt;李四&lt;/td&gt;&lt;td&gt;女&lt;/td&gt;&lt;td&gt;浙江杭州&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot; checked=&#39;checked&#39;/&gt;&lt;/td&gt;&lt;td&gt;王五&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;湖南长沙&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;&lt;td&gt;找六&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;浙江温州&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;&lt;td&gt;Rain&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;浙江杭州&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;choice&quot; value=&quot;&quot;/&gt;&lt;/td&gt;&lt;td&gt;MAXMAN&lt;/td&gt;&lt;td&gt;女&lt;/td&gt;&lt;td&gt;浙江杭州&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

。

以上が中段フックの色落ち効果の出し方のご紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。