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

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

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

Answer 2

假设您有名为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/

在jQuery中交替非连续的行颜色

2 个答案: