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;
}

如果它仍然不起作用，听起来像是从其他服务器应用内联样式，在这种情况下，我不喜欢使用！重要的是，我喜欢它比慢速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直接设置在单元格上，它将覆盖。

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

3 个答案: