I have a temperature table and I would like to change the background-color of each <td> based on it's content. For example:

<tr class="temp-box">
    <td scope="row" class="temp-title">Máx(ºC)</td>
    <td>19</td>
    <td>19</td>
    <td>22</td>
    <td>27</td>
    <td>31</td>
    <td>32</td>
    <td>32</td>
    <td>32</td>
    <td>31</td>
    <td>28</td>
    <td>24</td>
    <td>22</td>
</tr>

I would like a javascript/jquery function to check every <td> content and if, for example it is a numeric value from 10 to 15, changes the background-colorto blue, if it's from 20 to 30, changes to red, and so on...

Any ideias? Thanks!

I have a temperature table and I would like to change the background-color of each <td> based on it's content. For example:

<tr class="temp-box">
    <td scope="row" class="temp-title">Máx(ºC)</td>
    <td>19</td>
    <td>19</td>
    <td>22</td>
    <td>27</td>
    <td>31</td>
    <td>32</td>
    <td>32</td>
    <td>32</td>
    <td>31</td>
    <td>28</td>
    <td>24</td>
    <td>22</td>
</tr>

I would like a javascript/jquery function to check every <td> content and if, for example it is a numeric value from 10 to 15, changes the background-colorto blue, if it's from 20 to 30, changes to red, and so on...

Any ideias? Thanks!

• javascript
• jquery
• arrays
• range

• 1 I think if you have an array of colours ready, and then take the value module some appropriate number you'll have the proper index in the array. – shapiro yaacov Commented Sep 21, 2015 at 14:49
• Hey @joanaaarrr, wele to S.O. What have you tried so far to change the colors? If you have some code, please edit your question to show that. – Gustavo Straube Commented Sep 21, 2015 at 14:52
• also, how is the table generated? maybe you could add different styles during generation ot the table? – bwright Commented Sep 21, 2015 at 14:54

6 Answers 6

Add classes to tds and give color using CSS.

$(document).ready(function(){
    $('td').each(function() {
      var text = parseInt($(this).text());
      if (10 < text &&  text <= 20) {
        $(this).addClass('red');
      } else if (20 < text && text <= 35) {
        $(this).addClass('blue');
      }
    })
})

.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr class="temp-box">
    <td scope="row" class="temp-title">Máx(ºC)</td>
    <td>19</td>
    <td>19</td>
    <td>22</td>
    <td>27</td>
    <td>31</td>
    <td>32</td>
    <td>32</td>
    <td>32</td>
    <td>31</td>
    <td>28</td>
    <td>24</td>
    <td>22</td>
  </tr>
</table>

// Function returns a color based on whatever logic you want
function findColor(value) {
  var colorMap = [
    { color: "#0000ff", min: 10, max: 15 },
    { color: "#0000ff", min: 20, max: 30 }
  ];
  var result = colorMap.filter(function(item) {
    return item.min <= value && item.max >= value;
  });
  if (result.length > 0) {
    return result[0].color;
  }
  return "transparent";
}

$(".temp-box td").each(function() {

  // read numeric value
  var value = parseInt(element.text(),10);
  element.css("background-color", findColor(value));
});

You could do something like the following:

$('td').each(function(){
  var red   = Math.round($(this).text() / 100 * 255);
  var blue  = 255 - red;
  $(this).css('background', 'rgb(' + red + ', 0, ' + blue + ')');
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table>
<tr>
  <td>25</td>
  <td>100</td>
  <td>10</td>
  <td>34</td>
  <td>88</td>
  <td>70</td>
  <td>20</td>
</tr>
</table>

It's not capable of doing negative values, but it does show anything between 0 and 100 degrees in the correct color, and this can be adjusted.

Using addClass(function) with a bit of logic based on cell values and a hashmap of classes

 var classes = {
    1: 'red',
    2: 'blue',
    3: 'green'
  }

  $('td').addClass(function() {
    var value = +$(this).text();
    if (!isNaN(value)) {
      return classes[Math.floor(value / 10)]
    }
  });

DEMO

Try this...

this creates a REAL green to red skala...

(of course you could tweak the values a bit, so that it fits more your needs..) =)

$("tr.temp-box td:not(.temp-title)").each(function(){
  var r = parseInt((255 * $(this).text()) / 100);
  var g = parseInt((255 * (100 - $(this).text())) / 100);
  var b = 0;
  var bgColor="rgb("+r+","+g+","+b+")";
  console.log(bgColor);
 $(this).css("background-color",bgColor);   
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table>
<tr class="temp-box">
    <td scope="row" class="temp-title">Máx(ºC)</td>
    <td>19</td>
    <td>19</td>
    <td>22</td>
    <td>27</td>
    <td>50</td>
    <td>60</td>
    <td>50</td>
    <td>32</td>
    <td>31</td>
    <td>28</td>
    <td>24</td>
    <td>22</td>
</tr>
  </table>

More color options here for you... You can take your pick on how many options you are going to use and for which temperature span...

html:

<table id="mytable">
    <tr class="temp-box">
    <td scope="row" class="temp-title">Máx(ºC)</td>
    <td>19</td>
    <td>19</td>
    <td>22</td>
    <td>27</td>
    <td>31</td>
    <td>32</td>
    <td>32</td>
    <td>32</td>
    <td>31</td>
    <td>28</td>
    <td>24</td>
    <td>22</td>
</tr>
</table>

Jquery:

$('#mytable td').each(function(){
    var currentValue = $(this).html();
    if(currentValue <= 20){$(this).css("background-color", "lightblue");}
    if(currentValue >= 21 && currentValue <= 24){
        $(this).css("background-color", "lightgreen");}
    if(currentValue >= 25 && currentValue <= 28){
        $(this).css("background-color", "yellow");}
    if(currentValue >= 29 && currentValue <= 31){
        $(this).css("background-color", "orange");}
    if(currentValue >= 32){
        $(this).css("background-color", "red");}
});

Working fiddle here: http://jsfiddle/oquczbtk/