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>
  • 相关阅读:
    STM32 串口DMA方式接收(转)
    STM32 串口功能 库函数 详解和DMA 串口高级运用(转载)
    内存泄露调试心得
    Android 5.0 5.1 webview 闪退问题
    ios 接入微信开发 新版
    ios 获取app版本号
    ios alamofire4.x网络框架url 中文问题
    微服务监控druid sql
    kotlin 单例模式
    mysql 数据库保存 微信分享时不能换行
  • 原文地址:https://www.cnblogs.com/liufeiran/p/12614213.html
Copyright © 2011-2022 走看看