Javascript datatables选定的行背景色

我是个新手，所以请容忍我；我正在使用jQuery datatables插件，我需要选择一行并更改所选行的颜色。我从datatables中遵循了这一点，但它对我不起作用

以下是初始化表的方式：

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>

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

请尝试以下操作： 您必须更改网格id名称：

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

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

这是因为类行_selected被添加到元素中，所以您的选择器与任何内容都不匹配

此外，背景色被添加到元素中，您的自定义颜色是“在”默认选定颜色下

尝试：

---

在最新的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 */
   }

---

这可能对在同一项目中使用datatables和Bootstrap 3的人有所帮助： 我使用VisualStudio，我有一个MVC项目，其中还包括Bootstrap3。如果我从我的项目中删除引导，我注意到当选中时，奇数行和偶数行都会高亮显示，所以我假设引导中一定有某种东西会覆盖选中行的背景色

下一个bootstrap代码已经存在于bootstrap.css中，它所做的是更改奇数行的背景色

.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 */ 
}

---

是否已添加$example tbody.clickfunctionevent{$oTable.fnSettings.aoData.eachfunction{$this.nTr.removeClass'row_selected'；}；$event.target.parentNode.addClass'row_selected'；}？你需要遵循这个链接：这确实有效，但id不会改变所有td元素的背景；第一列谁的背景是由datatables设置的css不会改变background@OctavianEpure：您可以尝试添加！强制覆盖数据库基样式的重要信息

 .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 */
   }

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

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