jquery - 交替行颜色，除非单元格在 jquery 中已经有颜色

Question

我有这个代码，它将行颜色交替为灰色和白色：

$('tr:even').each(function(i){ $(this).find('td').css('background-color','white');});
$('tr:odd').each(function(i){ $(this).find('td').css('background-color','grey');});

除了一些单元格是红色的。如何使灰色和白色的交替行不会取代红色单元格？上面的代码删除了所有红色单元格并将它们替换为白色或灰色。谢谢你。

Answer 1

为什么不直接使用 css：

tr:even td {
    background-color: grey;
}
tr:odd td {
     background-color: white;
}
tr:even td.red, tr:odd td.red {
    background-color: red;
}

旧浏览器黑客：

$(document).ready(function(){
  $('table tr:even').addClass('even');
  $('table tr:odd').addClass('odd');
});

tr.even td {
    background-color: grey;
}
tr.odd td {
     background-color: white;
}
tr.even td.red, tr.odd td.red {
    background-color: red;
}

如果它仍然不起作用，听起来像是从其他服务器应用内联样式，在这种情况下，尽管我讨厌使用 !important，但我更喜欢它而不是慢 jquery 解决方案：

$(document).ready(function(){
  $('table tr:even').addClass('even');
  $('table tr:odd').addClass('odd');
});

tr.even td {
    background-color: grey !important;
}
tr.odd td {
     background-color: white !important;
}
tr.even td.red, tr.odd td.red {
    background-color: red !important;
}

Answer 2

您可以使用not()函数参数，如下所示：

var filter_red = function(){ return $(this).css('background-color') == 'rgb(255, 0, 0)'};
$('tr:even').not(filter_red).REST OF YOUR CODE..

Answer 3

奇数行或偶数行（不是两者都行！）的类将使这变得容易。

$("tr").filter(":even").addClass("even");

CSS：

tr.even td {
    background-color: #ededed;
}

直接在元素上设置的样式将优先于样式表中的样式，因此如果您的红色 css 直接在单元格上设置，它将被覆盖。