jquery数据表行突出显示无效

Question

我有这张桌子。

<div class="table-responsive">
<div class="card-body">

    <table class="table table-striped" id="dataTable" cellspacing="0">        
        <thead>
            <tr>
                <th class="big-col">Id</th>
                <th class="big-col">Name</th>
                <th class="big-col">Project</th>

并且此代码在选择时突出显示行。但它没有用。

 $("#dataTable tbody").on("click", "tr", function () {


                var data = table.api()
                            .row($(this).closest('tr'))
                            .data();


                $('#userid').val(data.Id);
                $("#dataTable tbody tr").removeClass('row_selected');
                $(this).addClass('row_selected');

我的问题：

我很确定点击身体是有效的，因为我可以获得身份证，但突出显示的行不起作用。

我的css上也有这个：

tr.row_selected td{

background-color:rgba(116, 206, 80, 1) !important;

}

Answer 1

如果您选中this page about datatables api usage，则可以看到将脚本称为dataTable和DataTable是不同的。在这种情况下，你的问题是关于这一点。检查此代码段。

$(document).ready(function(){

var table = $('#dataTable').DataTable();

var tableApi = $('#dataTable').dataTable();

    $("#dataTable tbody").on("click", "tr", function () {
            var data = tableApi.api().row($(this)).data();
            console.log(data);
            $('#userid').val(data[0]);
            $("#dataTable tbody tr").removeClass('row_selected');
            $(this).addClass('row_selected');
    });
});

tr.row_selected td{

background-color:rgba(116, 206, 80, 1) !important;

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>


<table class="table table-striped" id="dataTable" cellspacing="0">        
    <thead>
        <tr>
            <th class="big-col">Id</th>
            <th class="big-col">Name</th>
            <th class="big-col">Project</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>1</td>
          <td>TestName</td>
          <td>TestProj</td>
        </tr>
        <tr>
          <td>2</td>
          <td>TestName</td>
          <td>TestProj</td>
        </tr>
        <tr>
          <td>3</td>
          <td>TestName</td>
          <td>TestProj</td>
        </tr>
    </tbody>
</table>