How To: Change table cell color depending on its value using jQuery

Keith Rull — Wed, 09 Jun 2010 18:32:49 GMT

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

How To: Change the row and column colors of a table using jQuery

Keith Rull — Thu, 06 May 2010 00:23:11 GMT

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>

Keith Rull - jQuery

How To: Change table cell color depending on its value using jQuery

Iterating to the table via table id

Iterating to the table via class name

How To: Change the row and column colors of a table using jQuery