时间戳

首页 > 解决方案 > 带有表格颜色变化的复选框选择

jquery - 带有表格颜色变化的复选框选择

问题描述

我创建了一个表，如果用户单击 masterCheckBox 以逐个选择所有复选框或选择框，然后将table>tr背景颜色从默认更改为红色，我想在其中添加一个函数。这样用户就可以确定table>tr他/她被复选框选中了，反之亦然，当复选框不检查tr背景变为默认为白​​色时，然后像我的代码中一样执行 ajax。

1>最后我做了所有的功能，但我不能改变tr被选中的背景颜色效果。

2> ajax 成功后从主复选框中删除检查。

注意：我在 stackoverflow 和谷歌上搜索了这个，但我没有得到满意的答案，并试图通过在 stackoverflow 上显示各种帖子来做，但我最终无法做到这一点，请不要将此帖子标记为保留并复制和别的。请帮我。

在我选择所有复选框的情况下，代码如下。

全选复选框

$("#myFunctionCheckAll").click(function() {
var checkedStatus = $(this).find('span').hasClass('checked');
    $("#mailBody tr .chChildren input:checkbox").each(function() {
        this.checked = checkedStatus;
            if (checkedStatus == this.checked) {
                $(this).closest('.checker > span').removeClass('checked');
            }
            if (this.checked) {
                $(this).closest('.checker > span').addClass('checked');
            }
    });
});

CSS

.removeRow {
  background-color: #c2dbff;
  color:#FFFFFF;
}


$('#btn_delete').click(function() {

    var id = [];

    $(':checkbox:checked').each(function(i) {
        id[i] = $(this).val();
//Issue Come 
if($(this).is(':checked'))
    {
        $(this).closest('tr').addClass('removeRow');
    }
    else
    {
        $(this).closest('tr').removeClass('removeRow');
    }
//Issue end
    });

    if (id.length === 0) {
        alert("Please Select atleast one checkbox");
    } else {
        if (confirm("Are you sure you want to delete this?")) {
            $.ajax({
                url: 'deletetr.php',
                method: 'POST',
                data: {
                    id: id
                },
                success: function() {
                    for (var i = 0; i < id.length; i++) {
                        $('tr#' + id[i] + '').css('background-color', '#f5f5f5');
                        $('tr#' + id[i] + '').fadeOut('normal');
                    }
                }

            });
        } else {
            return false;
        }
    }

});
<a id="myFunctionCheckAll" title="selectAllCheckboxOnce"><span class="option-link square"><input type="checkbox"></span></a>

<a id="btn_delete"><span class="option-link trash"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></span>Delete</a>

<table width="100%" cellpadding="2" cellspacing="0" border="0" class="th" id="mailBody">

    <tr class="message-row" id="3205">

        <td width="1%" class="chChildren">

            <input type="checkbox" name="name[]" class="action" value="3205">
            <img style="width: 40px; height: 40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6Mwikrsp1V3kTV0chB1-B5cjYfabyyxKgJthlsrwW2fcOJOIw" alt="username" class="class" />

        </td>

        <td width="25%">
            <span class="snds">
                        <span class='credentials'>Name</span> </span>
            <span class="label grey-label label-right">Label</span>

        </td>

        <td width="73%">

            <a data-urlajaxMail="#" class="messagedetails">
                <span class="ts">406924241</span>
                <font color="#7777CC">
                                    <span class="elps">773980766</span>
                                </font>
            </a>
        </td>

        <td width="1%" nowrap="">
            7 mins ago </td>

    </tr>

    <tr class="message-row" id="3205">

        <td width="1%" class="chChildren">

            <input type="checkbox" name="name[]" class="action" value="3205">
            <img style="width: 40px; height: 40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6Mwikrsp1V3kTV0chB1-B5cjYfabyyxKgJthlsrwW2fcOJOIw" alt="username" class="class" />

        </td>

        <td width="25%">
            <span class="snds">
                        <span class='credentials'>Name</span> </span>
            <span class="label grey-label label-right">Label</span>

        </td>

        <td width="73%">

            <a data-urlajaxMail="#" class="messagedetails">
                <span class="ts">406924241</span>
                <font color="#7777CC">
                                    <span class="elps">773980766</span>
                                </font>
            </a>
        </td>

        <td width="1%" nowrap="">
            7 mins ago </td>

    </tr>

</table>

标签： jqueryhtmlcssajax

解决方案

$(document).ready(function () {

    $("#mailBody tr .chChildren input:checkbox").change(function () {
        if ($(this).prop('checked')) {
            $(this).closest('tr').addClass('removeRow');
        } else {
            $(this).closest('tr').removeClass('removeRow');
        }
    });

    $("#myFunctionCheckAll").click(function () {
        var checkedStatus = $('#myFunctionCheckAll input:checkbox').prop('checked')
        $("#mailBody tr .chChildren input:checkbox").each(function () {
            $(this).prop('checked', checkedStatus).change();
        });
    });

    $('#btn_delete').click(function () {

        var id = [];

        $('#mailBody tr .chChildren input:checkbox:checked').each(function (i) {
            id[i] = $(this).val();
        });

        if (id.length === 0) {
            alert("Please Select atleast one checkbox");
        } else {
            if (confirm("Are you sure you want to delete this?")) {
                $.ajax({
                    url: 'http://localhost/deletetr.php',
                    method: 'POST',
                    data: {
                        id: id
                    },
                    success: function () {
                        for (var i = 0; i < id.length; i++) {
                            console.log(id[i])
                            $(`tr#${id[i]}`).css('background-color', '#f5f5f5');
                            $(`tr#${id[i]}`).fadeOut('normal');
                        }
                    }

                });
            } else {
                return false;
            }
        }

    });
});
.removeRow {
    background-color: #c2dbff;
    color: #FFFFFF;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <a id="myFunctionCheckAll" title="selectAllCheckboxOnce">
        <span class="option-link square"><input type="checkbox"></span>
    </a>
    <br>
    <br>
    <br>

    <a id="btn_delete"><span class="option-link trash">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i></span>Delete
    </a>
    <br>
    <br>
    <br>

    <table width="100%" cellpadding="2" cellspacing="0" border="0" class="th" id="mailBody">

        <tr class="message-row" id="3205">

            <td width="1%" class="chChildren">

                <input type="checkbox" name="name[]" class="action" value="3205">
                <img style="width: 40px; height: 40px"
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6Mwikrsp1V3kTV0chB1-B5cjYfabyyxKgJthlsrwW2fcOJOIw"
                    alt="username" class="class" />

            </td>

            <td width="25%">
                <span class="snds">
                    <span class='credentials'>Name</span> </span>
                <span class="label grey-label label-right">Label</span>

            </td>

            <td width="73%">

                <a data-urlajaxMail="#" class="messagedetails">
                    <span class="ts">406924241</span>
                    <font color="#7777CC">
                        <span class="elps">773980766</span>
                    </font>
                </a>
            </td>

            <td width="1%" nowrap=""> 7 mins ago </td>

        </tr>

        <tr class="message-row" id="3206">

            <td width="1%" class="chChildren">

                <input type="checkbox" name="name[]" class="action" value="3206">
                <img style="width: 40px; height: 40px"
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6Mwikrsp1V3kTV0chB1-B5cjYfabyyxKgJthlsrwW2fcOJOIw"
                    alt="username" class="class" />

            </td>

            <td width="25%">
                <span class="snds">
                    <span class='credentials'>Name</span> </span>
                <span class="label grey-label label-right">Label</span>

            </td>

            <td width="73%">

                <a data-urlajaxMail="#" class="messagedetails">
                    <span class="ts">406924241</span>
                    <font color="#7777CC">
                        <span class="elps">773980766</span>
                    </font>
                </a>
            </td>

            <td width="1%" nowrap="">
                7 mins ago </td>

        </tr>

    </table>

更新：

var checkedStatus = $('#myFunctionCheckAll input:checkbox').prop('checked')
// true or false

$("#mailBody tr .chChildren input:checkbox").each(function () {
    // $(this).prop('checked', checkedStatus) is enough for change its value
    // Also, we need trigger change event with ` ... .change()` 
    $(this).prop('checked', checkedStatus).change();
});
  1. 最后我完成了所有功能，但我无法更改选择 tr 的背景颜色效果。 
// Create checkbox value changed event listener, and in it, add/remove 'removeRow' class from the checkbox status
$("#mailBody tr .chChildren input:checkbox").change(function () {
    if ($(this).prop('checked')) {
        $(this).closest('tr').addClass('removeRow');
    } else {
        $(this).closest('tr').removeClass('removeRow');
    }
});
  1. ajax 成功后从主复选框中删除检查。 
$(`tr#${id[i]}`)  // https://stackoverflow.com/a/610415/11343720

代替

$('tr#' + id[i] + '')

推荐阅读