Here's a quick and easy way to alternate the row colors of a table using jQuery
<script>
$(document).ready(function()
{
//set the color of the row based on rowindex
$(".report-table-horizontal tr:even").css("background-color", "#FFF8DC");
$(".report-table-horizontal tr:odd").css("background-color", "#FFFBD0");
//highlight the table titles by selecting the first row
$(".report-table-horizontal tr:first").css("background-color", "#FFCC33");
});
</script>
The resulting code will apply the to the table and would look like this:
Basically what the code is doing is that it is selecting a css class called "report-table-horizontal" and applies the style to the tr attribute of the table based on their row index whether they are even or odd.
Now if you want to change the color of a table column you can do so using this script:
<script>
$(document).ready(function()
{
//set the color of the row based on rowindex
$(".report-table-vertical tr:even").css("background-color", "#FFF8DC");
$(".report-table-vertical tr:odd").css("background-color", "#FFFBD0");
//set the color of the first column
$(".report-table-vertical td:first-child").css("background-color", "#FFCC33");
});
</script>
The difference on this code is the third line wherein we specified that the style will be applied on the first td element of the table. Alternately you can use the nth-child(n) selector instead to do the same task:
$(".report-table-vertical td:nth-child(1)").css("background-color", "#FFCC33");Hope this helps. You can view the live sample here:
alternating table colors with jquery.html (2.42 KB)or just copy and paste the HTML code below to a new file:
<html>
<head>
<title>Working with tables in jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
//set the color of the row based on rowindex
$(".report-table-horizontal tr:even").css("background-color", "#FFF8DC");
$(".report-table-horizontal tr:odd").css("background-color", "#FFFBD0");
//highlight the table titles by selecting the first row
$(".report-table-horizontal tr:first").css("background-color", "#FFCC33");
//set the color of the row based on rowindex
$(".report-table-vertical tr:even").css("background-color", "#FFF8DC");
$(".report-table-vertical tr:odd").css("background-color", "#FFFBD0");
//set the color of the first column
$(".report-table-vertical td:nth-child(1)").css("background-color", "#FFCC33");
});
</script>
<style type="text/css">
body
{
font-family: Arial;
}
</style>
</head>
<body>
<h2>Alternating row colors in a table with jquery</h2>
<table class="report-table-horizontal">
<tr>
<td width="100px">Firstname</td>
<td width="100px">Lastname</td>
<td>Email</td>
</tr>
<tr>
<td>Keith</td>
<td>Rull</td>
<td>keith@example.com</td>
</tr>
<tr>
<td>Charissa</td>
<td>Rull</td>
<td>charissa@example.com</td>
</tr>
<tr>
<td>Zoe Adrielle</td>
<td>Rull</td>
<td>zoe@example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>jdoe@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>janedoe@example.com</td>
</tr>
<tr>
<td>Tony</td>
<td>Brown</td>
<td>brown@example.com</td>
</tr>
<tr>
<td>Lisa</td>
<td>Sally</td>
<td>sally@example.com</td>
</tr>
</table>
<br />
<h2>Change the color of the the first column with jquery</h2>
<table class="report-table-vertical">
<tr>
<td width="100px">Product</td>
<td>Price</td>
</tr>
<tr>
<td>Eggs</td>
<td>$1.10</td>
</tr>
<tr>
<td>Flour</td>
<td>$1.20</td>
</tr>
<tr>
<td>Carrots</td>
<td>$0.35</td>
</tr>
<tr>
<td>Cucumber</td>
<td>$0.50</td>
</tr>
<tr>
<td>Melon</td>
<td>$0.99</td>
</tr>
</table>
</body>
<html>