2

I'll start fresh. I have a table pulled from a remote server. The table has white odd rows and grey even rows. I've hidden some rows:

$("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

Now my table rows no longer alternate but is instead white, grey, grey, grey, white. How do I make them alternate again? Creating a class like: $("tr").filter(":even").addClass("even"); + css tr.even td{background-color: blue;} makes it white, blue, blue, blue, white so it still doesn't alternate.

I can do this $('tr:nth-child(4)').each(function(i){ $(this).find('td').css('background-color', 'white');}); and it works white, grey, WHITE, grey, white. But there's a catch! Row 4 has red cells that I want to remain red. The code above overrides the red cells to white.

The style from 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>

I want this red alert color to remain red while the rows alternate to white and grey.

Improve this question
2
  • Can you get the server to send it with a !important ? Commented Jun 7, 2013 at 22:56
  • 1
    Using !important is a very bad idea Commented Jun 7, 2013 at 22:58

2 Answers 2

Reset to default
1

Assuming you have classes called even and odd, try something like this:

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

That is, remove any existing even and odd classes from the tr elements, then use the :visible selector to just process the ones that you didn't hide.

Demo (that also shows how individual red cells are not affected by the row classes): http://jsfiddle.net/J5DqP/1/

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Hi nnnnnn. Your suggestion actually works with my added css tr.even td{background-color: #C0C0C0;} tr.odd td{background-color: #FFFFFF;}. My rows are alternating again, except now we need to make the red cells remain red. How do we do this?
I've updated my demo to show that you can retain red cells. But how do you set them to red in the first place? Also, why not just tr.even {background-color...? You don't really need the td in the CSS selector. CSS cascades, so if you apply the odd and even just to the rows and then apply the red just to the cells that might fix your problem.
Ok I'll elaborate a bit. I don't set the cells to red in the first place. I am pulling a table from a remote server whose cells change color green,orange,red depending on the cell data. If cell data is 100% the cell is green, if it's 80% it's orange, and if 60% it's red. Your demo is hard coding the red cells. I can't do that, since the cell data changes frequently. As for omitting the tr.odd {background-color..., the alternating rows cease to work. But I get that css should cascade but it's not.
I updated my original post to add the style that the remote server is applying. <script src="remoteserver/sorttable.js"></script> <style type = "text/css">';...
That should still work as per my demo. Note in my demo that the grey and white odd and even class apply to tr elements, but the red class applies to td elements. The styles you added to your question are also for td elements, so they should work the same way.
|
1

One simple approach would be is to apply the classes over again..

 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**

If you can change the styles that are being added, replace

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

with 

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

OR

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

10 Comments

Hi Sushanth. Thank you for your suggestion. Your approach may be too simple for me to understand. I pasted your code after mine and nothing happened. Do I need to add anything in my css? Please elaborate.
you would need to define the CSS classes to your style sheet or where ever you are defining them
nnnnnn's suggestion works. His is similar to yours except the :visible is what makes it work. I still need your help in retaining red cells since the alternating grey and white rows are overriding the red cells to white and/or grey.
How are you defining the styles for the other td's .. Look's like a specificity issue
This is all I have in my css as far as td is concerned td{padding: 0.5em; border: 1px solid red;}.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.