使用jquery单击删除按钮更改行背景颜色答案

【问题标题】：Change Row background color upon clicking delete button using jquery使用jquery单击删除按钮更改行背景颜色
【发布时间】：2020-09-15 08:14:54
【问题描述】：

您好，我有一个表格，在单击该按钮时，列中有一个删除按钮，该行将突出显示为红色。我一直在尝试一些不同的东西，但它只是不起作用。如何在 ConfirmBox() 方法中更改行的颜色？提前谢谢你.......................

             <table id="loanSignatoriesTable" class="table table-striped table-bordered bg-light">
                        <thead class="bg-blue">
                            <tr>
                                <th>Emp No.</th>
                                <th>Employee Name</th>
                                <th>Rank</th>
                                <th>Designation</th>
                                <th>Group/Department</th>
                                <th>Signatory Type</th>
                                <th>Default</th>
                                <th>Status</th>
                                <th>Modified Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
      </table>

--JAVASCRIPT

         $(document).ready(function () {
         var table = $('#loanSignatoriesTable').DataTable({

                "orderCellsTop": true,
                "bPaginate": true,
                "order": [[1, "desc"]],
                "dom": '<"row"<"col-6"l><"col-12"rt><"col-6"i><"col-6"p>>',
                "language": {
                    "emptyTable": "No record/s to display"
                },
                "ajax": {
                    "url": "Signatories.aspx/GetEverySignatories",
                    "type": 'post',
                    "contentType": "application/json; charset=utf-8",
                    "dataSrc": "d"
                },
                "columns": [
                    {


                        "data": {
                            EmpId: "EmpId",
                            Id: "id"
                        },

                        "width": '15%',
                        "render": function (data, type, full, meta) { return data.EmpId }

                    },


                                           {

                        "data": {
                            ModifiedDate: "ModifiedDate",
                            ApplicationNo: "ApplicationNo",
                            Id: "id"
                        },

                        "width": '15%',
                        "render": function (data, type, full, meta) {

                            return '<center>'
                                + '<a href="#" name="idapplication" OnClick="return ConfirmBox(' + 
                                data.Id + ');" value="Delete" > Delete <a/>'
                                + '<br/>'
                                + '<a href="#" name="idedit" OnClick="EditItem(' + data.Id + ');" 
                             value="Edit" > Edit <a/>'

                                + '</a>'
                            '</center >';
                             }
                            },
                        ]
                     });
                   }

--调用确认框

            function ConfirmBox(RefID) {

            document.getElementById("hiddenRefID").value = RefID;
            setTimeout(function () {
                if (confirm("Are you sure you want to delete this record?")) {

                    CallButtonEvent();
                }
                else {


                }
            }, 1);

        }

【问题讨论】：

标签： javascript c# jquery asp.net datatable

【解决方案1】：

           "render": function (data, type, full, meta) {

                        return '<center>'
                            + '<a href="#" name="idapplication" OnClick="return 
                     ConfirmBox(this,' + data.Id + ');" value="Delete" > Delete <a/>'
                            + '<br/>'
                            + '<a href="#" name="idedit" OnClick="EditItem(' + data.Id 
                       + ');" value="Edit" > Edit <a/>'

                            + '</a>'
                        '</center >';
                    }



      function ConfirmBox(Elem,RefID) {

       $(Elem).closest('tr').css('background-color', 'red');
        document.getElementById("hiddenRefID").value = RefID;
        setTimeout(function () {
            if (confirm("Are you sure you want to delete this record?")) {

                CallButtonEvent();
            }
            else {
                  $(Elem).closest('tr').css('background-color', 'White');

            }
        }, 1);

    }

【讨论】：

【解决方案2】：

你可以在函数参数中传递当前元素对象，然后在函数体中你可以访问调用元素的父'

'元素，然后更新相同的CSS属性。使用以下代码更新 ajax 中的渲染属性：

 "render": function (data, type, full, meta) {

                        return '<center>'
                            + '<a href="#" name="idapplication" OnClick="return ConfirmBox(this,' + 
                            data.Id + ');" value="Delete" > Delete <a/>'
                            + '<br/>'
                            + '<a href="#" name="idedit" OnClick="EditItem(' + data.Id + ');" 
                         value="Edit" > Edit <a/>'

                            + '</a>'
                        '</center >';
                         }
                        },

使用以下更新您的功能

function ConfirmBox(Elem, RefID) {

        document.getElementById("hiddenRefID").value = RefID;
        setTimeout(function () {
            if (confirm("Are you sure you want to delete this record?")) {
                let parentTRElement = $(Elem).closest('tr').css('background', 'red');
                $(parentTRElement).css("background-color", "red");
                CallButtonEvent();
            }
            else {

            }
        }, 1);

    }

【讨论】：