1

在CSS中，我已经在tableas中定义了奇数行颜色，#eee但是当我尝试更新background-colorthrough时，它无法更新偶数行jQuery。jQuery 代码只更新odd行的颜色。

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

jQuery 调用

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

为什么会有奇怪的行为？如果需要示例，请告诉我。

4

2 回答 2

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 特异性和优先级以及它如何决定应用哪些样式的更多答案（大约在页面的一半处查看）

于 2013-07-28T23:57:13.053 回答
0

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

于 2013-07-28T18:39:54.180 回答