Starting from scratch here. I've fetched a table from a remote server where odd rows are white and even rows are grey. Some rows have been hidden:
$("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
The alternating row pattern is now disrupted, making it white, grey, grey, grey, white. How do I revert to the original alternating colors? Applying a class like:
$("tr").filter(":even").addClass("even");
+ css tr.even td{background-color: blue;}
results in white, blue, blue, blue, white which still doesn't alternate.
I can achieve this with:
$('tr:nth-child(4)').each(function(i){ $(this).find('td').css('background-color', 'white');});
, making it white, grey, WHITE, grey, white. However, there's an issue! Row 4 contains red cells that should remain red. The previous code turns them white instead.
The style provided by the server is:
<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>
The goal is to maintain the red alert color while restoring the alternating white and grey rows.