Styling the Alternating Row in HTML table Using jQuery
Sometimes, it is required to style the alternating row of a HTML table just like we do for databound controls like GridView, etc. For example, there may be requirement to provide a different background color for every alternating row in a table.
The below jQuery script will help us do that,
<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
$('#Students > tbody > tr:odd').css("background-color", "green");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="Students">
<tr><td>1</td><td>Babu</td></tr>
<tr><td>2</td><td>Satheesh</td></tr>
<tr><td>3</td><td>Ramesh</td></tr>
<tr><td>4</td><td>Venki</td></tr>
<tr><td>5</td><td>Abhishek</td></tr>
</table>
</div>
</form>
The above code will apply the background color "green" for every alternating rows(odd). Similarly, to apply the color for even rows,
<script language="javascript">
$(document).ready(function() {
$('#Students > tbody > tr:even').css("background-color", "Orange");
});
</script>
If you have stylesheet class for alternate rows, then you can use addClass() method instead of css().
Refer below,
<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
$('#Students > tbody > tr:even').addClass('row');
});
</script>
|