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

Question

在 CSS 中，我将 table 中的奇数行颜色定义为 #eee 但是当我更新偶数行时它无法更新尝试通过 jQuery 更新 background-color。 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) 现在也作用于 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 的顺序很重要。很多

必须是

1. 第 n 个子颜色(偶数/奇数)

2. 自定义背景(这将在稍后的脚本中添加)

3. 悬停，因为它位于自定义背景之上

4. 突出显示(因为这超出了其余部分)

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 特异性和优先级以及它如何决定应用哪些样式的更多答案(查看页面的一半左右)