<table>
<thead>
<tr>
<td>sf</td>
</tr>
<tr>
<td>sf</td>
</tr>
<tr>
<td>sf</td>
</tr>
<tr>
<td>sf</td>
</tr>
</thead>
</table>
.red {
background-color: red;
}
.green {
background-color: green;
}
How can i make automatically add class red and green for TR with jQuery?
LIVE EXAMPLE: http://jsfiddle.net/2Htwx/
$('tr:odd').addClass('red');
$('tr:even').addClass('green');
Assuming you want every other row red or green, as per your JS-fiddle. Note that this is within each table, so you won't see red/green/red across ALL table rows.
If you want that, try this:
var oddFilter = function(index) {
console.log(index);
return (index % 2) == 1;
},
evenFilter = function(index) {
console.log(index);
return (index % 2) == 0;
}
$('tr').filter(oddFilter).addClass('red').end()
.filter(evenFilter).addClass('green');
Note that <thead>, <tfoot> etc can still mess up the display, since that moves rows around the display.
You don't need JavaScript to accomplish this 'table-striping' effect. Use of the CSS nth-child selector will do the trick
thead tr {
background: green; /* Set all tr elements to green */
}
thead tr:nth-child(even) {
background: red; /* Override the colour for just the even ones */
}
Note: This selector is not supported in older browsers. IE8 and down.
Further reading on CSS nth-child:
You mean like this?
$(document).ready(function() {
var class = "";
$("tr").each(function(idx, elem) {
class = (idx % 2 == 0)?"red":"green";
$(elem).addClass(class);
});
});
Could you please explain "automatically"? You mean at page ready event?
Maybe somthing like this:
$(document).ready(function (){
$("tr:odd").css("background-color", "#f00");
$("tr:even").css("background-color", "#0f0");
});
Here's the simplest method:
$("tr").addClass("red");
try this
var trs = jQuery('tr');
trs.filter(':even').addClass('red');
trs.filter(':odd').addClass('green');
to not selecting two-times every tr
$('tr').addClass('red').addClass('green')?