change table alternative rows colors using jquery?

I have to change colors for alternative rows. one row in "Green" and another one is in "Yellow".

<tr cla开发者_如何学Css="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 have to skip "ms-viewheader" row and start coloring next sibling. Full row should be in color.

How to do this?

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

Ok, so you want to just handle this one table. Try this:

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

I am assuming that the table has a class, otherwise you could add a class to it to differentiate it.

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

Does it have to use JS? Here's 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 modified Teddy's code: http://jsfiddle.net/HvLRs/3/

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

If you want to treat ms-viewheader the same 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 rows:

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

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

If you need to do it dynamically, use:

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

As an alternative you could also use:

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

Something like this - use modulus

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

I see in your latest comment on the original question that the ms-alternating class is already there in the markup for you??

If so, you shouldn't need any jquery or fancy CSS3 rules to do this. You can do this with regular ol' 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 */
}

Please note, this will color all tables on the page. You probably only want to target a single table. So you need some more specific selectors. Does the table you want to color have an ID or class on it you could target?

Good luck!