Question

我有一个带有行条带的表，由CSS设置，我在jQuery中也有一个click函数。我的代码：

$(document).on('click', '.datarow', function() {
  $(".datarow").removeClass("highlight");
  $(this).addClass("highlight");
  // other code for row select
});

#datatable tr:nth-child(odd) {
  background-color: #fff;
  cursor: pointer;
}

#datatable tr:nth-child(even) {
  background-color: #fafafa;
  cursor: pointer;
}

#datatable tr:hover {
  background-color: #ddd;
}

#datatable tr .highlight {
  background-color: #fbbc05;
}

<table id="datatable">
<tr class="datarow">...</tr>
...
</table>

jQuery行突出显示不起作用。

但是，如果我删除CSS nth-child代码，那么jQuery会按预期工作。

所以CSS nth-child突出显示超过了jQuery，在点击时突出显示了一行。

我怎样才能让两者一起工作？

我尝试通过将“.highlight”增加到“#datatable tr .highlight”来关注此答案how can I use jquery addClass when selecting a tr to override a nth-child class on a parent div?，但仍然没有运气。

Answer 1

我怎样才能让两者一起工作？

首先你的CSS不正确：

imeOptions="actionSend"

说#datatable tr .highlight { background-color: #fbbc05; }中的元素有一个tr类，但你的jquery正在将该类直接应用于highlight，所以你应该使用：

tr

细微差别是#datatable tr.highlight { background-color: #fbbc05; }和tr之间的单一空格。

.highlight

与

非常不同

tr .hightlight {}

我还强烈建议您阅读Decoupling Your HTML, CSS, and JavaScript。你的CSS与你的html紧密相连。

CSS nth-child超越了jQuery点击突出显示

1 个答案: