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

在

CSS

中，我将

表中的奇数行颜色定义为
#eee
，但当我试图通过
jQuery
更新
背景颜色时，它无法更新偶数行。jQuery代码只更新
odd
行的颜色

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

jQuery调用

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

为什么会有这种奇怪的行为？如果需要一个例子，请告诉我。
这里是一个工作小提琴确保您有一个ID设置到
元素这里是一个工作小提琴确保您有一个ID设置到
元素编辑#3更新（2013年7月31日）；看

变化。。。我添加了javascript

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

以及一个名为highlight的css类

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

悬停选择器（：hover）现在也作用于td元素。现在，它使用透明背景，允许一行同时高亮显示和选中

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


编辑#2（7/30/2013
这就是你想要的吗

我重新安排了css的顺序，以使css优先级正常工作。如果这不是您想要做的，我将需要关于最终结果外观的规范


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

我想这就是你想要的。

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

我用了剧本

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

其中bluebackground是一个简单的类

代码的其余部分如下所示：

HTML

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;
}

这将给予他们中最突出的优先权，雅典娜悬停然后再高一级

阅读更多关于css特性和优先级以及如何决定应用哪种样式的答案（查看页面的一半）
edit#3更新（2013年7月31日）；请参阅

更改…我添加了javascript

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

以及一个名为highlight的css类

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

鼠标悬停选择器（：hover）现在也作用于td元素。它现在使用透明背景，允许一行同时高亮显示和选中

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


编辑#2（7/30/2013
这就是你想要的吗

我重新安排了css的顺序，以使css优先级正常工作。如果这不是您想要做的，我将需要关于最终结果外观的规范


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

我想这就是你想要的。

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

我用了剧本

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

其中bluebackground是一个简单的类

代码的其余部分如下所示：

HTML

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;
}

这将给予他们中最突出的优先权，雅典娜悬停然后再高一级

阅读更多关于css特性和优先级以及如何决定应用哪种样式的答案（查看页面的一半）
这不是我要找的。我有一个代码可以处理偶数和奇数斑马线。但问题是当
jQuery
代码试图高亮显示其中一行时，它无法高亮显示偶数行。这不是我要找的。我有一个代码可以处理偶数和奇数斑马线。但问题是当
jQuery
代码试图突出显示其中一行。它甚至无法突出显示行。您使用的浏览器是什么？Chrome、Safari、Firefox您使用的浏览器是什么？Chrome、Safari、FirefoxHmmmm。我理解您的意思，但我仍然无法理解。我创建了一个新的jsfiddel。用于突出显示问题。当我将鼠标悬停在
我的标签上时只高亮显示偶数行而不是奇数行。我如何确保所有行都高亮显示。看起来你真的很接近。我已根据要求更新了示例。当用户单击唯一的奇数行
1
时，该行应高亮显示。当用户单击偶数行
2
时，该行应高亮显示ted。在我的书《你是天才》中的例子。我希望我能给你更多的分数。我喜欢你没有放弃。问题现在解决了，我真的很感谢你的帮助。谢谢你！嗯。我理解你的意思，但我仍然无法理解。我创建了一个新的jsfiddel。来突出问题。当我将鼠标悬停在
我的标签上时只高亮显示偶数行，而不是奇数行。如何确保所有行都高亮显示。看起来