Question

在CSS中，我将table中的奇数行颜色定义为#eee但是当我尝试更新background-color时，它无法更新偶数行jQuery。 jQuery代码仅更新odd行的颜色。

.etable tr:nth-of-type(odd) {
    background: #eee;
}

jQuery调用

$('#' + this.options.id).addClass("hover");

任何奇怪行为的原因？如果需要一个例子，请告诉我。

Answer 1

编辑＃3更新（2013年7月31日）;见http://jsfiddle.net/mEVK3/17/

更改...我添加了javascript

    $('#table tr').click(function(){
        $(this).toggleClass('highlight');
    });

以及名为highlight

的css类

.etable tr.highlight {
   background-color: orange;
}

hover seletor（：hover）现在也作用于td元素。它现在使用透明背景来允许行突出显示和选择。

.etable tr td:hover {
   background-color: rgba(30,100,30,0.4);
   cursor:pointer;
}

编辑＃2（2013年7月30日这就是你想要的吗？ http://jsfiddle.net/mEVK3/12/

我重新排列了css的顺序，使css优先级正常工作。如果这不是你想要做的，我将需要关于最终结果应该如何看的规范。

编辑＃1：我有一个非常奇怪的答案，它与css优先级和代码添加到css的顺序有关！在我之前的回答中，内联样式被偶数行的css样式所覆盖！

我认为这就是你想要的。 http://jsfiddle.net/mEVK3/5/

我认为这是你不想要的 http://jsfiddle.net/mEVK3/4/

我使用了脚本

 $('#table.etable tr').addClass("bluebackground");

其中bluebackground是一个简单的类

其余代码如下：

HTML

<table class="etable" id="table">
<tr><td>Some text</td></tr>  
    <tr><td>Some text 0</td></tr>  
    <tr><td>Some text 1</td></tr>  
    <tr><td>Some text 2</td></tr>  
    <tr><td>Some text 3</td></tr>  
    <tr><td>Some text 4</td></tr>  
    <tr><td>Some text 5</td></tr>  
    <tr><td>Some text 6</td></tr>  
    <tr><td>Some text 7</td></tr>  
    <tr><td>Some text 8</td></tr>  
    <tr><td>Some text 9</td></tr>  
</table>

CSS

.etable tr:nth-child(odd) {
 background: lightgrey;
}

.etable tr.bluebackground{
  background-color: lightblue;
}

.etable tr:hover {
  background: #f00;
} 

.etable tr.highlight{
   background-color: yellow;
}

的Javascript

$('#table tr:eq(3)').addClass("highlight");

//change the background color in javascript
$('#table.etable tr').addClass("bluebackground");

注释掉脚本中的最后一行以从所有行中删除背景。

让我感到震惊的是，css的顺序很重要。很多

必须是

第n个儿童颜色（偶数/奇数）
自定义背景（稍后将在脚本中添加）
悬停，因此会自定义背景
突出显示（因为这会超过其余部分）

css命令很重要，因为在我写的剧本中，他们都有相同的总统。我想，相反，您可以为悬停添加额外的特异性并突出显示，以便它们始终位于顶部。然后css看起来像....

#table.etable tr:hover {
  background: #f00;
} 

table#table.etable tr.highlight{
   background-color: yellow;
}

这将突出他们所有人的最高优先级，然后悬停然后下一个最高......

阅读http://designshack.net/articles/css/what-the-heck-is-css-specificity/以获取有关css特异性和优先级的更多答案，以及它如何决定应用哪种样式（查看页面的一半）

Answer 2

这是一个工作小提琴http://jsfiddle.net/kevinPHPkevin/mEVK3/，确保您将ID设置为<table>元素

使用jQuery无法动态更改具有背景颜色的表行集

2 个答案: