删除背景色

Remove background color

本文关键字：背景色 删除      更新时间：2023-09-26

我对一个表使用奇数和偶数bgcolor。

我有一个单一的表结构，我正在做奇数和偶数bgcolor。我不想在那张桌子中间的几个<tr>中使用bgcolor（想要白色）。

如果我把任何类放在<tr>或<td>中，js就会覆盖它

嗨，我在做什么。

$(document).ready(function() {
    $(".myTable tr:odd").addClass("myTable-alt");
});

/css/

.myTable-alt  {
    background-color: #F8F8F8;
    overflow: hidden;
    padding-top: 5px;
}

!important是一种方法，另一种方法是更改CSS。

.myTable-alt  {
    background-color: #F8F8F8;
    overflow: hidden;
    padding-top: 5px;
}
.myTable-alt.no-color { /* for elements with BOTH classes */
    background-color: #fff;
}

对于想要白色背景的<tr>，它们可以看起来像：

<tr class="myTable-alt no-color">

因为所有的odd <tr>都将具有.myTable-alt类，您可以将第二个类添加到要修改的少数类中。

注意：如果父元素上的background-color与.myTable-alt相同，则这就是even行不是白色的原因。如果是这样的话，那么你可以像这样强制：

$(document).ready(function() {
    $(".myTable tr:odd").addClass("myTable-alt");
    $('.myTable tr:even').css('background-color', '#fff');
});

您可以在新类中使用更具体的选择器，如tr.newClass或css !important关键字，这样样式就不会被.myTable-alt覆盖。

例如

table tr.newClass{
  background-color: #FFF;
}

或

.newClass{
  background-color: #FFF !important;
}

如果您不需要支持IE8，可以使用nth-child对您的表进行斑马线处理。

tr:nth-child(odd) {
    background-color: #F8F8F8;
}

您可以创建一个类来覆盖所需行上的颜色。只要确保这个选择器定义在您的样式表中的上面一个之后。

tr.special {
    background-color: #FFF;
}

jsFiddle演示

相关文章：