We can create odd/even stripes with different alternate colors which is easier to identify and good to represent the data in alternate color format.
We can use the css method to color the even/odd rows using class selectors. This is the case when the listing is not being generated automatically, but when our listing is generated dynamically and we have to delete the rows or add another it's little difficult to manage alternate color representation for the listing hence we use jQuery to handle this problem, which has been explained with the help of an example below:
Example:
<!--doctype html-->
<html>
<head>
<title>Example addClass Jquery</title>
<style type='text/css'>
tr {
background-color:#FFFF00;
}
.changecolor {
background-color:#F4E095 ;
}
</style>
</head>
<body>
<p style="margin-left:150px;">List of Events</p>
<table>
<tbody>
<tr>
<td>Aerobatics</td><td>Event Date: 11-02-2016 </td><td> 5 teams</td>
</tr>
<tr>
<td>Gliding</td><td>Event Date: 14-02-2016 </td><td> 3 teams</td>
</tr>
<tr>
<td>Ballooning</td><td>Event Date: 07-03-2016 </td><td> 4 teams</td>
</tr>
<tr>
<td>Parachuting</td><td>Event Date: 14-03-2016</td><td> 6 teams</td>
</tr>
<tr>
<td>Paragliding </td><td>Event Date: 02-05-2016</td><td> 4 teams</td>
</tr>
<tr>
<td>Swimming</td><td>Event Date:11-02-2016</td><td>2 teams</td>
</tr>
<tr>
<td>Diving</td><td>Event Date:11-02-2016</td><td>3 teams</td>
</tr>
<tr>
<td>Water aerobics</td><td>Event Date:11-02-2016</td><td>4 teams</td>
</tr>
<tr>
<td>Water Polo</td><td>Event Date:11-02-2016</td><td>2 teams</td>
</tr>
<tr>
<td>Aquajogging </td><td>Event Date:11-02-2016</td><td>5 teams</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
$('tr:even').addClass('changecolor');
});
</script>
</body>
</html>
0 Comment(s)