jQuery数据表行背景颜色在排序列中没有改变答案

【问题标题】：jQuery datatable row background color not changing in sorted columnjQuery数据表行背景颜色在排序列中没有改变
【发布时间】：2020-11-11 10:48:34
【问题描述】：

我正在使用 jQuery 数据表，我希望根据条件更改背景颜色，将已排序的行悬停在我的图像上没有我的背景颜色。

这是我的条件

        "rowCallback": function (row, data, index) {
            if (data.componente.default_ubicacion.ubicacion_id === 0) {
                $(row).css("background-color", "rgb(225, 27, 27, 100%)");
                $(row).css("color", "white");
                $(row).addClass("group");
            }
        },

这是导致问题的 css

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: #f1f1f1;
}

table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
    background-color: #fafafa;
}

我该如何解决这个问题？

【问题讨论】：

标签： jquery css datatables

【解决方案1】：

试试这个：

"rowCallback": function (row, data, index) {
        if (data.componente.default_ubicacion.ubicacion_id === 0) {
            $(row).css("background-color", "rgb(225, 27, 27, 100%)");
            $(row).css("color", "white");
            $(row).addClass("yourClassName");
        }
    }

然后在您的 CSS 文件中包含以下内容：

table.dataTable.display tbody tr.yourClassName.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.yourClassName.even > .sorting_1 {
    background-color: transparent;
}

table.dataTable.display tbody tr.yourClassName.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.yourClassName.odd > .sorting_1 {
    background-color: transparent;
}

显然我不知道你的数据，但我为你准备了一个小例子：

var oTable = $('#tableName').DataTable({ 
    rowCallback: function(row, data, index){
    if(data[0] == 2){
        $(row).css('background-color', 'rgb(225, 27, 27, 100%)')
            .css('color', 'white')
            .addClass('yourClassName');
    }
  }
});

table.dataTable.display tbody tr.yourClassName.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.yourClassName.even > .sorting_1 {
    background-color: transparent;
}

table.dataTable.display tbody tr.yourClassName.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.yourClassName.odd > .sorting_1 {
    background-color: transparent;
}

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<div class="data-table-container">
  <table id="tableName" class="table cell-border order-column stripe">
   <thead>
    <tr>
        <th>Rank</th>
        <th>Country</th>
        <th>Code</th>
        <th>Total</th>
        <th>Beer</th>
        <th>Wine</th>
        <th>Spirits</th>
        <th>Other</th>
        <th>Score</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Estonia</td>
        <td>EE</td>
        <td>14.97</td>
        <td>5.87</td>
        <td>1.65</td>
        <td>5.64</td>
        <td>1.81</td>
        <td>3 - Medium Risky</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Belarus</td>
        <td>BY</td>
        <td>14.44</td>
        <td>2.5</td>
        <td>0.75</td>
        <td>6.73</td>
        <td>4.46</td>
        <td>4 - Very Risky</td>
    </tr>
  </table>
</div>

【讨论】：