Question

我正在使用jQuery来更改表的偶数行的background-color：

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

现在我想根据一些PHP任务的结果为我的tr之一设置另一种颜色。

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

但它不起作用，因为jQuery会覆盖颜色并将其设置回#F1F1F1。有没有办法阻止jQuery这样做？或者我也应该使用jQuery？

Answer 1

只需添加类似

的内容

data-nooverride

在样式属性之后/之前。

（您必须编辑以下代码才能使用每个代码）：

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

并使用您的脚本检查

Answer 2

请勿使用$.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;
}

它更清洁，更有可维护性。你可以让CSS决定如何设置类的特定组合，而不必在javascript或PHP中进行复杂和混乱的检查。

如果此时确实有CSS文件，则可以添加CSS类来设置备用行的样式。这样，它适用于禁用了javascript的浏览器。最后，当不支持这种风格的浏览器灭绝时，你可以完全摆脱JQuery代码。

Answer 3

是的，这是可能的。你需要以某种方式识别行（可能通过添加一个类），

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

然后修改jQuery选择器以忽略该行

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

由于您要添加一个类，您应该将背景颜色作为类的一部分。

Answer 4

不是在style标记中添加tr属性，而是从PHP代码中添加class。

然后，只需更改您的jQuery选择器，不要修改具有给定类的tr标记，如下所示（请参阅jQuery documentation on :not）。在本例中，该类称为special：

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

请参阅此working example。

Answer 5

在css中如果你在一些样式之后添加“！important”，它会告诉浏览器这个样式具有最高优先级。

所以你可以为它和你的css文件创建一个类：

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

您可以尝试在style属性中添加它，但我不确定它是否会以这种方式工作

防止jQuery改变背景颜色

5 个答案: