Question

我创建了一个带有Strip Example条的jquery数据表。我想为悬停应用不同的背景颜色。

CSS：

.selected {
    background-color:#71d1eb;
}

JavaScript的：

$('#basicTable tbody').on('mouseover', 'td', function () {
    if ($(this).parents('tr').hasClass('selected')) {
        $(this).parents('tr').removeClass('selected');
    } else {
        //Remove For Multi Select
        table.$('tr.selected').removeClass('selected');                   
        $(this).parents('tr').addClass('selected');                    

        //$(this).parents('tr').css("background-color", "yellow");// Not Working
    }
});

它正在处理偶数行（白色背景），但是对于奇数行（灰色背景），该行已选择应用的类，但背景未更改。我错过了什么吗？

修改

问题不在于奇怪的阶级。我试过了：

$(this).parents('tr').removeClass('odd');
$(this).parents('tr').addClass('selected');

删除奇数类并添加所选类但仍然是灰色背景。

问题是table-striped类。

修改2

我试过了：

$(this).parents('tr').css("cssText", "background-color:#71d1eb !important;");

这导致：

<tr role="row" class="odd" style="background-color: rgb(113, 209, 235) !important;"></tr>

但未应用所选颜色。

Answer 1

如评论中所述，使用!important，当然还有正确的选择器：

table.dataTable tbody tr:hover {
   background-color:#71d1eb !important;
}

演示 - ＆gt;的 http://jsfiddle.net/4gLysf62/

Answer 2

您只需要一个悬停选择器，用于与应用的选择器相同或更具体的选择器。

Promise

试一试：

table.dataTable.stripe tbody tr.odd:hover,
table.dataTable tbody tr:hover
{
  background-color:#71d1eb !important;
}

var table = $('#example').DataTable({
})

table.dataTable.stripe tbody tr.odd:hover,
table.dataTable tbody tr:hover
{
  background-color:#71d1eb !important;
}

带有条带和悬停的Jquery数据表

2 个答案: