zoukankan      html  css  js  c++  java
  • 勾选行变色和全选行变色

    //单选行变色
    function change(obj){

    var tr= $(obj).parent().parent();
    if(obj.checked){
    tr.addClass("trbgopen");
    }else{
    tr.removeClass("trbgopen");
    }
    }
    //全选
            queryallinput: function () {
                var inputs = document.getElementById("Payment_list_chekall")
                var tr = $(".Payment_list_chekone").parent().parent();
                if (inputs.checked == true) {
                    $(".Payment_list_chekone").prop("checked", true);
                    tr.addClass("trbgopen");//行变色
                } else {
                    $(".Payment_list_chekone").prop("checked", false);
                    tr.removeClass("trbgopen");
                }
            },
    th:
    <input type="checkbox" id="Payment_list_chekall" style="16px;height:16px" v-on:click="queryallinput()" />
    tr:
    <input type="checkbox" class="Payment_list_chekone" onclick="change(this)"/>

    通过点击传入this,再得到父级的父级tr,然后判断当前传入的this.checked是否是选中来添加或移除行变色样式,

    全选也是同理,判断所有的checked

    //全选
    function CheckBoxGroupExa(t, cla) {
        var c = "." + cla;
        if ($(t).prop("checked")) {
            $(c).prop("checked", true);
            //全选加上每行背景色
            $(c).parent().parent().addClass("changePE");
        } else {
            $(c).prop("checked", false);
            //取消全选去除每行背景色
            $(c).parent().parent().removeClass("changePE");
    
        }
    }
    //单击选中添加选中样式
    $("#PaymentExamineList").on("click", "tr", function (e) {
        //如果选中按钮就不执行
        if($(e.target).parent()[0].className == 'exclusion' || $(e.target)[0].className == 'exclusion'){
            return;
        }
        var target;
        if (e.target.nodeName.toLowerCase() == "tr") {
            target = $(e.target);
        }
        else if (e.target.nodeName.toLowerCase() == "td") {
            target = $(e.target).parent();
        }
        else {
            target = $(e.target).parent().parent();
        }
    
        if (target.hasClass("changePE")) {
            target.removeClass("changePE");
            target.find("td:eq(0) > input").prop("checked", false);
            //只要有一个不选中,就把顶上的全选取消
            $("#PaymentExamineCheckAll").prop("checked", false);
        }
        else {
            target.addClass("changePE");
            target.find("td:eq(0) > input").prop("checked", true);
        }
        //判断是否单个全选,全选把顶上的全选框勾上
        var num = 0;
        $("#PaymentExamineList tr").each(function(index,item){
            if($(item).find("td:eq(0) > input").prop("checked")){
                num++;
            }
        })
        if(num==10){
            $("#PaymentExamineCheckAll").prop("checked", true);
        }
    });
    //获取数据取消全选,翻页时获取数据
    $("#PaymentExamineCheckAll").prop("checked", false);
    <input type="checkbox" id="PaymentExamineCheckAll" onclick="CheckBoxGroupExa(this, 'PaymentExamineCheckOne')">全选
    
    <tbody id="PaymentExamineList" style="height:500px;">
            <tr style="height:30px;">
                 <td width="2.7%"><input type="checkbox" class="PaymentExamineCheckOne" ></td>
                 <td width="7.1%" style="border-right:none;" class="exclusion">
                    <span data-bind="click:OpenPaymentExamineinfo.bind($data,PaymentMaster_ID)">详情</span>
                 </td> 
            </tr>
    </tbody>
  • 相关阅读:
    UrlRewriter
    PortalBasic Web 应用开发框架
    首页静态化和定时执行
    细谈在C#中读写Excel系列文章之四
    Ubuntu安装SVN及SvnManager
    Select语句导致瓶颈
    策略模式
    抽象工厂
    递归优化之快速排序
    从安装git开始,一步一步把程序发布到AppHarbor
  • 原文地址:https://www.cnblogs.com/liufeiran/p/12614213.html
Copyright © 2011-2022 走看看