Here's a nifty trick using jQuery on how to iterate on all rows of a table except the first row,
how to get the value of a column in the current row being iterated and how to change the table cell color depending on the value it contains.
In
this case we wanted to change the color of the 3rd column depending on
whether it is higher or lower than the second column. There are two examples in here. The first one is select the table via its ID and the second version is selecting the table based on its class name.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
//iterate through all the rows in our table called yourtable
//excluding the first row because those are column titles
$("#yourtablename tr:not(:first)").each(function() {
//get the value of the table cell located
//in the third column of the current row
var priceYesterday = $(this).find("td:nth-child(2)").html();
var priceToday = $(this).find("td:nth-child(3)").html();
//check if its greater than zero
if (priceToday > priceYesterday){
//change the color of the text to green if its a positive number
$(this).find("td:nth-child(3)").css("color", "#00FF00");
}
else if(priceToday < priceYesterday){
//change the color of the text to red if its a negatice number
$(this).find("td:nth-child(3)").css("color", "#FF0000");
}
});
//iterate through all the rows in our table called yourtable
//excluding the first row because those are column titles
$(".yourtableclassname tr:not(:first)").each(function() {
//get the value of the table cell located
//in the third column of the current row
var priceYesterday = $(this).find("td:nth-child(2)").html();
var priceToday = $(this).find("td:nth-child(3)").html();
//check if its greater than zero
if (priceToday > priceYesterday){
//change the color of the text to green if its a positive number
$(this).find("td:nth-child(3)").css("color", "#00FF00");
}
else if(priceToday < priceYesterday){
//change the color of the text to red if its a negatice number
$(this).find("td:nth-child(3)").css("color", "#FF0000");
}
});
});
</script>
Below is the full source for this sample:
Iterating to the table via table id
| Product Name |
Yesterday |
Today |
| Egg |
1.95 |
2.10 |
| Sugar |
1.92 |
1.88 |
| Milk |
1.95 |
1.97 |
| beans |
3.15 |
3.06 |
Iterating to the table via class name
| Product Name |
Yesterday |
Today |
| Egg |
1.95 |
2.10 |
| Sugar |
1.92 |
1.88 |
| Milk |
1.95 |
1.97 |
| beans |
3.15 |
3.06 |
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
//iterate through all the rows in our table called yourtable
//excluding the first row because those are column titles
$("#yourtablename tr:not(:first)").each(function() {
//get the value of the table cell located
//in the third column of the current row
var priceYesterday = $(this).find("td:nth-child(2)").html();
var priceToday = $(this).find("td:nth-child(3)").html();
//check if its greater than zero
if (priceToday > priceYesterday){
//change the color of the text to green if its a positive number
$(this).find("td:nth-child(3)").css("color", "#00FF00");
}
else if(priceToday < priceYesterday){
//change the color of the text to red if its a negatice number
$(this).find("td:nth-child(3)").css("color", "#FF0000");
}
});
//iterate through all the rows in our table called yourtable
//excluding the first row because those are column titles
$(".yourtableclassname tr:not(:first)").each(function() {
//get the value of the table cell located
//in the third column of the current row
var priceYesterday = $(this).find("td:nth-child(2)").html();
var priceToday = $(this).find("td:nth-child(3)").html();
//check if its greater than zero
if (priceToday > priceYesterday){
//change the color of the text to green if its a positive number
$(this).find("td:nth-child(3)").css("color", "#00FF00");
}
else if(priceToday < priceYesterday){
//change the color of the text to red if its a negatice number
$(this).find("td:nth-child(3)").css("color", "#FF0000");
}
});
});
</script>
</head>
<body>
<h3>Iterating to the table via table id</h3>
<table id="yourtablename">
<thead>
<tr>
<td>Product Name</td>
<td>Yesterday</td>
<td>Today</td>
</tr>
</thead>
<tbody>
<tr>
<td>Egg</td>
<td>1.95</td>
<td>2.10</td>
</tr>
<tr>
<td>Sugar</td>
<td>1.92</td>
<td>1.88</td>
</tr>
<tr>
<td>Milk</td>
<td>1.95</td>
<td>1.97</td>
</tr>
<tr>
<td>beans</td>
<td>3.15</td>
<td>3.06</td>
</tr>
</tbody>
</table>
<h3>Iterating to the table via class name</h3>
<table class="yourtableclassname">
<thead>
<tr>
<td>Product Name</td>
<td>Yesterday</td>
<td>Today</td>
</tr>
</thead>
<tbody>
<tr>
<td>Egg</td>
<td>1.95</td>
<td>2.10</td>
</tr>
<tr>
<td>Sugar</td>
<td>1.92</td>
<td>1.88</td>
</tr>
<tr>
<td>Milk</td>
<td>1.95</td>
<td>1.97</td>
</tr>
<tr>
<td>beans</td>
<td>3.15</td>
<td>3.06</td>
</tr>
</tbody>
</table>
</body>
</html>
You can copy and paste the code above and put it on a new file to see it running or you can view this sample running here:
jquery_change_table_cell_color_depending_on_value.html
(3.05 KB)HTH