jqueryexample.com JQuery alternate row style - jqueryexample.com

JQuery alternate row style by jqueryexample

If you have a table with lots of rows, it is really need to set different background color for alternating rows. If your table row are generating dynamically then its not possible through html. Use below code to add a different background color to every other row.

In CSS define a class even and odd.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#table1 tr:odd").addClass("odd");
$("#table1 tr:even").addClass("even");
});
</script>
<style>
.odd{background-color:#ccc;}
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

Did you like this? Share it:

Discussion

  1. backlinks says:

    great to meet you jqueryexample.com blogger found your blog via search engine..

Leave a Comment