在jQuery中交替非顺序行颜色

Question

我会重新开始。我有一张从远程服务器拉出的桌子。该表有白色奇数行和灰色偶数行。我隐藏了一些行：

$("td").filter(function(){ return $(this).text()=='R1';}).text('Row1'); //white
$("td").filter(function(){ return $(this).text()=='R2';}).text('Row2'); //grey
$('tr:nth-child(3)').hide();                                            //white
$("td").filter(function(){ return $(this).text()=='R4';}).text('Row4'); //grey
$('tr:nth-child(5)').hide();                                            //white
$("td").filter(function(){ return $(this).text()=='R6';}).text('Row6'); //grey
$("td").filter(function(){ return $(this).text()=='R7';}).text('Row7'); //white

现在我的表格行不再交替，而是白色、灰色、灰色、灰色、白色。我如何让它们再次交替？创建一个类，如：$("tr").filter(":even").addClass("even"); + css tr.even td{background-color: blue;} 使其变为白色、蓝色、蓝色、蓝色、白色，因此它仍然不会交替。

我可以做到这一点$('tr:nth-child(4)').each(function(i){ $(this).find('td').css('background-color', 'white');});，它适用于白色、灰色、白色、灰色、白色。但是有一个问题！第 4 行有我想保持红色的红色单元格。上面的代码将红色单元格覆盖为白色。

来自服务器的样式是：

<script src="remoteserver/sorttable.js"></script>
<style type = "text/css">';
    td.datacellone{
        background-color: #C0C0C0;
    }
    th.datacellheader{
        background-color: #6A5ACD;
    }
    td.alert{
        background-color: #FF0000;
    }
    td.orange{
        background-color: #FFA500;
    }
    td.green{
        background-color: #008000;
    }
</style>

我希望当行交替为白色和灰色时，此红色警报颜色保持红色。

Answer 1

假设您有名为 even 和 odd 的类，请尝试以下操作：

var $trs = $('tr').removeClass('even odd').filter(':visible');
$trs.filter(':even').addClass('even');
$trs.filter(':odd').addClass('odd');

也就是说，从 tr 元素中删除任何现有的 even 和 odd 类，然后使用 :visible selector 来处理您没有隐藏的那些。

演示（还显示了单个红色单元格如何不受行类的影响）：http://jsfiddle.net/J5DqP/1/

Answer 2

一种简单的方法是重新应用这些类。

 var $table = $('table');
 $('tr:even', $table).addClass('even');
 $('tr:odd', $table).addClass('odd');

  //Remove 1 td

  $('tr', $table).removeClass('even odd'); // Remove both the classes
  $('tr:even', $table).addClass('even');
  $('tr:odd', $table).addClass('odd');

**EDIT**

如果您可以更改正在添加的样式，请替换

td.alert{ background-color: #FF0000; }

与

tr td.alert{ background-color: #FF0000; }

或

tr.odd td.alert, tr.eventd.alert, { background-color: #FF0000; }