Измените цвет фона строки после нажатия кнопки удаления, используя jquery - PullRequest
Новая
       11

Измените цвет фона строки после нажатия кнопки удаления, используя jquery

1 голос
/ 28 мая 2020

Привет, у меня есть таблица, в столбце которой была кнопка удаления, при нажатии на кнопку строка будет выделена красным цветом. Я пробовал разные вещи, но они просто не работали. как изменить цвет строки в методе 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 >';
                             }
                            },
                        ]
                     });
                   }

- Вызов Confirmbox 

            function ConfirmBox(RefID) {

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

                    CallButtonEvent();
                }
                else {


                }
            }, 1);

        }

Ответы [ 2 ]

0 голосов
/ 28 мая 2020 
           "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);

    }
0 голосов
/ 28 мая 2020

Вы можете передать текущий объект элемента в параметрах функции, а затем в теле функции вы можете получить доступ к родительскому элементу '

' вызывающего элемента, а затем обновить его свойство 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);

    }
...