以免jQuery改变背景颜色

我使用jQuery更改表的偶数行的background-color：以免jQuery改变背景颜色

$("table tbody tr:nth-child(even)").css("background-color", "#F1F1F1");

现在我想根据一些结果，以另一种颜色设置为我tr■一个PHP任务。

<tr 
    <?php 
     // Some tasks to see whether background-color should change or not 
     if (yes) echo "style='background-color:#A60000;'" 
    ?> 
>

但它不起作用，因为jQuery覆盖颜色并将其重新设置为#F1F1F1。有什么办法可以防止jQuery做到这一点？或者我应该使用jQuery？

来源

2011-10-19 Pedram Behroozi

你考虑过一个CSS类吗？ –

你真的应该用'classes'来做这个，它会给你更多的控制权（'！important'）等等。$（“table tbody tr：nth-child（even）”）。addClass（'even' ）'。 – Matt

这里的事件顺序是什么？您是否在当前页面上运行jQuery代码，然后重新加载页面以获取新行？ –

请勿使用$.css添加颜色，而是使用addClass来代替向该行添加类。在PHP中，也添加一个类而不是内联样式。

然后，在你的样式表，你可以相应样式行：

/* The class that is added by JQuery */ 
.jqueryclass { 
    background-color: #F1F1F1; 
} 

/* The class that is added by PHP, even if jquery added a class too. */ 
.phpclass, .phpclass.jqueryclass { 
    background-color: #A60000; 
}

它是更清洁和更maintanable。您可以让CSS决定如何设计特定的类组合，而无需在JavaScript或PHP中进行复杂而混乱的检查。

如果您此时确实有CSS文件，您可以添加CSS类来设置替代行的样式。这样，它就可以在JavaScript禁用的浏览器上运行。随着时间的推移，当不支持这种风格的浏览器已经灭绝时，你可以全部清除JQuery代码。

来源

2011-10-19 13:29:25 GolezTrol

不错的答案。帮了很多。谢谢。 –

风格属性之前只需添加类似

data-nooverride

刚过

/。

（你必须编辑下面的代码使用每个）：

var tr = $("table tbody tr:nth-child(even)"); 
if (tr.data('nooverride')){ 
    $("table tbody tr:nth-child(even)").css("background-color", "#F1F1F1"); 
}

，并与您的脚本检查

来源

2011-10-19 13:25:37 genesis

'tr'将会是多重的，所以你必须在每个'tr'上加'each'并检查每个属性的数据属性。 – Matt

是的，这是可能的。你需要（可能通过添加类）不知何故标识行，

<tr 
    <?php 
     if (yes) echo "class='myclass' style='background-color:#A60000;'" 
    ?> 
>

然后修改jQuery选择忽略该行

$(selector).not('.myclass').css({...});

既然你添加一个类，应该把背景颜色作为课程的一部分。

来源

2011-10-19 13:27:46 Jeff

与其向tr标记添加style属性，不如从PHP代码中添加class。

然后，只需将您的jQuery选择器更改为不修改具有给定类的tr标记（如下所示）（请参阅jQuery documentation on :not）。类，在这种情况下，被称为special：

$("table tbody tr:nth-child(even):not(.special)").css("background-color", "#F1F1F1");

看到这个working example。

来源

2011-10-19 13:30:18 wsanville

更好：使用课堂练习。为什么要用硬编码的样式值来污染Javascript/JQuery逻辑。这就是你的样式表。 – GolezTrol

True，class>内联样式。 – wsanville

-1

在CSS中，如果在某些样式之后添加“！important”，它会告诉浏览器该样式具有最高优先级。

这样就可以使一个类，并在你的CSS文件：

.myclass{ 
    background-color:#A60000 !important; 
}

你可以尝试将其添加在样式属性，但我不知道但如果它会以这种方式工作

来源

2011-10-19 13:33:36

以免jQuery改变背景颜色

回答

相关问题