Question

我是新手，所以请耐心等待;我正在使用jQuery datatables插件，我需要选择一行并更改所选行的颜色。我从数据表中跟踪了这个example，但它对我不起作用。

这是我初始化表格的方式：

var oTable = $("#rolesTable").dataTable({
    // "bJQueryUI": true,
    "iDisplayLength": 25,
    "aoColumns": [
        null,
        {"sType": "role"},
        null,
        null
    ],
    "aaSorting": [[1, "desc"], [0, "asc"]]
});

这是click事件和CSS类的代码：

<style>
.row_selected tr {
    background-color: black;
}
</style>

$("#rolesTable tbody tr").click(function (event) {
    $(oTable.fnSettings().aoData).each(function () {
        $(this.nTr).removeClass('row_selected');
    });
    $(event.target.parentNode).addClass('row_selected');
});

抱歉，我添加了点击处理程序

Answer 1

这是因为类row_selected已添加到<tr>元素，因此您的选择器与任何内容都不匹配。

此外，background-color已添加到<td>元素中（您的自定义颜色为'默认选定颜色'）。

尝试：

.row_selected td {
    background-color: black !important; /* Add !important to make sure override datables base styles */
 }

Answer 2

在最新的Datatables版本1.10.12中，您必须执行以下操作：

 .even.selected td {
           background-color: rgb(0,170,0); !important; /* Add !important to make sure override datables base styles */
  }

 .odd.selected td {
          background-color: rgb(0,0,230); !important; /* Add !important to make sure override datables base styles */
   }

Answer 3

.table tr.row_selected td {
background-color: #### !important;
}

Answer 4

尝试这样的事情：您必须更改网格ID名称：

$(document).ready(function () {
        $('#grid tr').click(function () {

            $(this).css('background-color', "#D6D5C3");
        });
    });

Answer 5

这对于在同一项目中使用数据表和Bootstrap 3的用户可能会有所帮助：我使用Visual Studio，我有一个MVC项目，其中也包括Bootstrap3。如果从项目中删除了Bootstrap，我注意到选中时奇数行和偶数行都被突出显示，因此我认为Bootstrap中肯定有某些东西会覆盖背景色。选定的行。

bootstrap.css中已经存在下一个Boostrap代码，它的作用是更改奇数行的背景颜色。

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

我测试了将以下代码添加到bootstrap.css中，就在之前的代码行之后。我觉得这种解决方案并不优雅，但对我有用。

.table-striped > tbody > tr.selected > td,
.table-striped > tbody > tr.selected > th {
  background-color: #A9D0F5; /* change #A9D0F5 by the color of your preference */ 
}

数据表选择行背景颜色

5 个答案: