勾中行变色效果的实现方法介绍-js教程-PHP中文网

首页

web前端

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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn