Changes the background color of even rows to gray and odd rows to yellow on the tables using JQUERY.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('tr:even').css('background-Color', 'gray');
$('tr:odd').css('background-Color', 'yellow');
});
</script>
</head>
<body>
<table id="table1" border="1">
<tr>
<td>C#</td>
<td>ASP.NET</td>
<td>SQL Server</td>
</tr>
<tr>
<td>.NET</td>
<td>jQuery</td>
<td>JavaS</td>
</tr>
<tr>
<td>AJAX</td>
<td>CSS</td>
<td>HTML</td>
</tr>
<tr>
<td>VB</td>
<td>Dot NET</td>
<td>Visual</td>
</tr>
<tr>
<td>Oracle</td>
<td>Java</td>
<td>J2EE</td>
</tr>
</table>
<br />
<table id="table2" border="1">
<tr>
<td>M1</td>
<td>M2</td>
<td>M3</td>
</tr>
<tr>
<td>N1</td>
<td>N2</td>
<td>N3</td>
</tr>
<tr>
<td>O1</td>
<td>O2</td>
<td>O3</td>
</tr>
<tr>
<td>P1</td>
<td>P2</td>
<td>P3</td>
</tr>
<tr>
<td>Q1</td>
<td>Q2</td>
<td>Q3</td>
</tr>
</table>
</body>
</html>To change the background color of even rows to gray and odd rows to yellow just for one of the table, use #id selector along with element selector.<script type="text/javascript">
$(document).ready(function() {
$('#table1 tr:even').css('background-Color', 'gray');
$('#table1 tr:odd').css('background-Color', 'yellow');
});
</script>