javascript - datatables selected row background color

Question

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 example from datatables but it doesn't work for me.

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:

<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

score 6 · Accepted Answer

这是因为类row_selected被添加到<tr>元素，所以你的选择器不匹配任何东西。

此外，background-color添加到<td>元素中（您的自定义颜色是“低于”默认选择的颜色）。

尝试：

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

score 5 · Accepted Answer

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

score 2 · Accepted Answer

2

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

于 2014-04-23T06:10:48.477 回答

score 1 · Accepted Answer

这可能对在同一个项目中使用数据表和 Bootstrap 3 的人有所帮助：我使用 Visual Studio，并且我有一个 MVC 项目，其中还包括 Bootstrap 3。如果我从项目中删除了 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 */ 
}

score 0 · Accepted Answer

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

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

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

javascript - datatables selected row background color

5 回答 5

Related

Reference