Change table of alternative row colors with jquery?

Question

I need to change colors for alternate lines. one row in Green and the other in Yellow.

<tr class="ms-viewheader" vAlign="top"> <tr class=""> <tr class="ms-alternating"> <tr class=""> <tr class="ms-alternating"> <tr class=""> <tr class="ms-alternating"> <tr class=""> <tr class="ms-alternating"> 

I need to skip the ms-viewheader line and start painting the next brother. The full line should be in color.

How to do it?

Answer 1

Good, so you just want to process this table. Try the following:

 $("table[class='ms-listviewtable'] tr[class='']").css("background-color","yellow"); $("table[class='ms-listviewtable'] tr:.ms-alternating").css("background-color","green") 

I assume the table has a class, otherwise you could add a class to it to distinguish it.

Demo: http://jsfiddle.net/J7dVX/13/

Answer 2

run something like this in javascript

 // define the background color for even and odd rows var bgColors = { even: '#eaeaea', odd: '#aeaeae' }; $("table tr:not(.ms-viewheader):even").css({"backgroundColor":bgColors.even}); $("table tr:not(.ms-viewheader):odd").css({"backgroundColor":bgColors.odd}); 

Answer 3

Do I need to use JS? Here is a CSS solution. http://jsfiddle.net/HvLRs/1/

CSS

 tr:nth-child(2n) { background-color:green; } tr:nth-child(4n) { background-color:yellow; } 

HTML:

 <table id="alternating"> <th class="ms-viewheader" vAlign="top"><td>Header</td></th> <tr class=""><td>1</td></tr> <tr class="ms-alternating"><td>2</td></tr> <tr class=""><td>3</td></tr> <tr class="ms-alternating"><td>4</td></tr> <tr class=""><td>5</td></tr> <tr class="ms-alternating"><td>6</td></tr> <tr class=""><td>7</td></tr> <tr class="ms-alternating"><td>8</td></tr> </table> 

If you must use jQuery, I changed the Teddy code: http://jsfiddle.net/HvLRs/3/

 $("table tr:.ms-alternating:even").css("background-color","yellow"); $("table tr:.ms-alternating:odd").css("background-color","green"); 

Answer 4

If you need to do this dynamically, use:

 $("tr[class='']").css("background-color", "green"); $(".ms-alternating").css("background-color", "yellow"); 

Alternatively you can also use:

 $(".ms-viewheader").siblings().css("background-color", "green"); $(".ms-alternating").css("background-color", "yellow"); 

Answer 5

If you want to treat ms-viewheader in the same way as ms-alternating :

 $('tr:not([class^="ms"])').css('background-color','red'); $('tr[class^="ms"]').css('background-color','blue'); 

otherwise, if you just want to skip ms-viewheader and start alternating all the other lines:

 $('tr:not([class^="ms"])').css('background-color','red'); $('tr.ms-alternating').css('background-color','blue'); 

Proof of concept: http://jsfiddle.net/daybreaker/J7dVX/

Answer 6

Something like this - use a module

 for row, i in $('tbody tr') color = if i % 2 is 0 then '#ff0000' else '#00ff00' $(row).css 'background-color', color 

Answer 7

In your last comment on the original question, do I see that the ms-alternating class already exists in the markup for you ??

If so, you do not need any jQuery or fancy CSS3 rules for this. You can do this using regular CSS.

Just add this to your CSS:

 tr td { background-color:green; /* this colors the whole table green */ } tr.ms-viewheader td { background-color:transparent; /* we don't want the header to get any color, so reset it */ } tr.ms-alternating td { background-color:yellow; /* and finally, color the alternating rows yellow */ } 

Note that this will color all the tables on the page. You probably want to target only one table. Therefore, you need a few more special selectors. Does the table for which you want to colorize have an identifier or class that you could target?

Good luck