javascript 数据表选定行背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19112507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
datatables selected row background color
提问by Octavian Epure
I'm a newbie so bear with me; I'm using jQuery datatables plugin and I need to select a row and change the color of the selcted row. I followed this examplefrom datatables but it doesn't work for me.
我是新手，请多多包涵；我正在使用 jQuery 数据表插件，我需要选择一行并更改所选行的颜色。我从数据表中遵循了这个示例，但它对我不起作用。
This is how i initialize the table:
这是我初始化表的方式：
var oTable = $("#rolesTable").dataTable({
// "bJQueryUI": true,
"iDisplayLength": 25,
"aoColumns": [
null,
{"sType": "role"},
null,
null
],
"aaSorting": [[1, "desc"], [0, "asc"]]
});
and this is the code for the click event and the CSS class:
这是单击事件和 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');
});
Sorry, I added the click handler
抱歉，我添加了点击处理程序
回答by Elorfin
It's because class row_selectedis added to <tr>element, so your selector doesn't match anything.
这是因为类row_selected被添加到<tr>元素，所以你的选择器不匹配任何东西。
Moreover, background-coloris added to <td>elements (your custom color is 'under' default selected color).
此外，background-color添加到<td>元素（您的自定义颜色在默认选定颜色之下）。
Try :
尝试 ：
.row_selected td {
background-color: black !important; /* Add !important to make sure override datables base styles */
}
回答by Hasson
In the latest Datatables version 1.10.12 you have to do something like this:
在最新的 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 */
}
回答by TED
.table tr.row_selected td {
background-color: #### !important;
}
回答by Martin Pfeng
This may be helpful for those who use datatables and Bootstrap 3 in the same project: I use Visual Studio and I have a MVC project which also includes Bootstrap 3. If I removed Bootstrap from my project, I noticed both odd and even rows are highlighted when selected, so I assumed there must be something in Bootstrap that overwrites the background color of selected rows.
这可能对在同一个项目中使用数据表和 Bootstrap 3 的人有所帮助：我使用 Visual Studio 并且我有一个 MVC 项目，其中还包括 Bootstrap 3。如果我从我的项目中删除 Bootstrap，我注意到奇数行和偶数行都突出显示当被选中时，所以我假设 Bootstrap 中必须有一些东西会覆盖所选行的背景颜色。
The next Boostrap code already exists in bootstrap.css and what it does is change the background color for the odd lines.
下一个 Boostrap 代码已经存在于 bootstrap.css 中，它的作用是改变奇数行的背景颜色。
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
I tested adding the following code to the bootstrap.css, just AFTER the previous code lines. I don't find this solution elegant, but it worked for me.
我测试将以下代码添加到 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 */
}
回答by tilda
Try something like this: You'll have to change grid id name:
尝试这样的事情：您必须更改网格 ID 名称：
$(document).ready(function () {
$('#grid tr').click(function () {
$(this).css('background-color', "#D6D5C3");
});
});
