如何在單擊時刷新數據表並更改行背景色

Question

我試圖更改單擊按鈕時行的背景顏色，而無需重新加載頁面。 這是我的代碼，請讓我知道我的代碼有什么問題。 我已經嘗試過了，但是如果不重新加載頁面就無法做到這一點。 誰能幫我這個忙。

$.ajax({
    type: "GET",
    url: "API-Link",
    success: function (data) {
//Some code here

        $('#unmatched-driver tbody').on('click', '.btn_ok', function (e) {
            //location.reload(true);
            var data = oTable.row($(this).parents('tr')).data();
            var tripid = data[1];
            var OKflagid = ($(this).data("value"));
            $.ajax({
                type: "POST",
                url: "API-Link",
                dataType: 'json',
                dataSrc: ''
            });
            $(this).parents('tr').css("background-color", "#bbf6c5");
        });
        $('#unmatched-driver tbody').on('click', '.btn_nok', function (e) {
            //location.reload(true);
            var data = oTable.row($(this).parents('tr')).data();
            var tripid = data[1];
            var NOKflagid = ($(this).data("value"));
            $.ajax({
                type: "POST",
                url: "API-Link",
                dataType: 'json',
                dataSrc: ''
            });
            $(this).parents('tr').css("background-color", '#f6c1bb');
        });
        oTable = $('.trip_unmacthed').DataTable({
            "pageLength": 5,
            "ordering": false,
            "columnDefs": [{
                "targets": [11, 12, 13],
                "visible": false
                            }],
            rowCallback: function (row, data, index) {
                if (data[13] == "1") {
                    $('td', row).css('background-color', '#bbf6c5');
                } else if (data[13] == "2") {
                    $('td', row).css('background-color', '#f6c1bb');
                }
            }

        });
    } 
}) 

Answer 1

當文檔對象模型（DOM）准備就緒時，您必須編寫單擊事件。

推薦這個

去做就對了。

function addClickEvent() {
   $(document).on('click', 'btn_selector', function () {
      $(this).closest('tr').css("background-color", "#bbf6c5");
});

$(function () {
   addClickEvent();
  });
}

看，我已經做到了。

請按照以下步驟操作：

（1）路線

    Route::group(['prefix' => 'example'], function () {
        Route::get('', 'ExampleController@view');
        Route::get('get_table_data', 'ExampleController@get_table_data');
    });

（2）控制器

    namespace App\Http\Controllers\User;

    use App\Http\Controllers\Controller;
    use DataTables;
    use App\Utility;

    class ExampleController extends Controller {

        public function view() {
            return view('pages.store_admin.example-table');
        }

        function get_table_data() {
            return DataTables::eloquent(Utility::query())->toJson();
        }

    }

（3）查看

    @extends('layouts.store_admin')
    @section('title','Example')
    @section('page-title','Example')
    @section('page-title-desc','')
    @section('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.15/datatables.min.css"/>
    @endsection

    @section('content')
    <div class="row">
        <div class="card">
            <div class="card-body"> 
                <div class="col-lg-12 col-md-12"> 
                    <div class="table-responsive">
                        <table class="table table-ordered" id="example_table" style="width: 100%">
                            <thead style="font-weight: bold;">
                                <tr>
                                    <td>ID</td>
                                    <td>Key</td>
                                    <td>Value</td>
                                    <td>Action</td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div> 
            </div> 
        </div> 
    </div> 

    @endsection

    @section('js')
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.15/datatables.min.js"></script>
    <script type="text/javascript">
    <?php
    $data_url = url('example/get_table_data');
    ?>
        window.data_url = '{{ $data_url }}';
    </script>
    <script type="text/javascript" src="{{ asset('js/store_admin/example-table.js') }}"></script>
    @endsection

（4）js

$(function () {
        addDataTable();
        addClickEvent();
    });

    function addDataTable() {

        window.example_table = $('#example_table').DataTable({
            processing: true,
            serverSide: true,
            targets: 0,
            stateSave: true,
            ajax: {
                url: window.data_url
            },
            columns: [
                {
                    data: 'id',
                    visible: false,
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'key',
                    orderable: true,
                    searchable: true
                },
                {
                    data: 'value',
                    orderable: true,
                    searchable: true
                },
                {
                    data: 'id',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function (data, type, row) {
                        return '<button class="btn btn-sm btn-danger change-red-color-btn">Red</button>'
                                + ' <button class="btn btn-sm btn-success change-green-color-btn">Green</button>';
                    }
                }
            ]
        });

    }

    function addClickEvent() {

        $(document).on('click', '.change-red-color-btn', function () {
            $(this).closest('tr').css("background-color", "red");
        });

        $(document).on('click', '.change-green-color-btn', function () {
            $(this).closest('tr').css("background-color", "green");
        });
    }