CODEWITHSUNDEEP
jqueryhtml
67Stefano
67Stefano

Reputation: 53

Change background color based on cell value

I want to change the background color of each cell based on the value. But I can't get it to work

http://jsfiddle.net/qvp0n78w/2/

$(document).ready(function () {    
    var cell = $('table.maandrendementen td');    
    cell.each(function() {    
        var cell_value = $(this).html();    
        // Positief    
        if ((cell_value >= 0) && (cell_value <= 0,3)) {  
            $(this).css({ 'background' : '#7FFF95' });     
        } 
        else if ((cell_value >= 0,31) && (cell_value <= 0,5)) {
            $(this).css({ 'background' : '#66FF7C' });
        } 
        else if ((cell_value >= 0,51) && (cell_value <= 0,7)) {
            $(this).css({'background' : '#4DFF63'});
        } 
        else if ((cell_value >= 0,71) && (cell_value <= 1)) {
            $(this).css({'background' : '#33F749'});
        }
        else if ((cell_value >= 1,01) && (cell_value <= 1,5)) {
            $(this).css({'background' : '#1ADE30'});
        }
        else if (cell_value >= 1,5) {
            $(this).css({'background' : '#00CC66'});
        }

        // Negatief
        else if ((cell_value >= -0,01) && (cell_value <= -0,2)) {
            $(this).css({'background' : '#F6ADAC'});
        }
        else if ((cell_value >= -0,31) && (cell_value <= -0,5)) {
            $(this).css({'background' : '#F18483'});
        }
        else if ((cell_value >= 0,51) && (cell_value <= -0,7)) {
            $(this).css({'background' : '#EF706E'});
        }
        else if ((cell_value >= -0,71) && (cell_value <= -1)) {
            $(this).css({'background' : '#ED5B5A'});
        }
        else if ((cell_value >= -1,01) && (cell_value <= -1,5)) {
            $(this).css({'background' : '#EB4745'});
        }
        else if (cell_value >= -1,5) {
            $(this).css({'background' : '#E93331'});
        }
    });
});

Any help would be greatly appreciated

Upvotes: 1

Views: 4475

Answers (3)

amd
amd

Reputation: 21452

1. Convert the string to number

you have to parse the '1,6%' string to a number before comparing it, a var value = Number( '1,6%'.replace(',', '.').replace('%', '') );

2. Build a map instead of using ugly if (https://jsbin.com/keqepicine/edit?js,console,output)

$(document).ready(function () {

    var cell = $('table td');

    var minColor = 'red';
    var maxColor = 'green';

    var mapColor = [
      {
        value: -2.0,
        color: 'red'
      },
      {
        value: -0.1,
        color: 'orange'
      },
      {
        value: 0.1,
        color: 'grey'
      },
      {
        value: 0.2,
        color: 'blue',
      },
      {
        value: 0.5,
        color:'#66FF7C'
      }
    ];

    function getColor(value){
        value = + value.trim().replace(/,/g, '.').replace('%', '');


      if(value < mapColor[0].value){
        return minColor;
      }

        for(var i = 0; i<mapColor.length; i++){
            if( value < mapColor[i].value){
                return mapColor[i].color;
            }
        }

      return maxColor;

    }

    cell.each(function () {
      $(this).css('background-color', getColor($(this).html()));
    });

});

Upvotes: 0

Keammoort
Keammoort

Reputation: 3075

First you need to remove '%' sign and then parse this into float. Also you haven't added 'maandrendementen' class in your HTML code, but you've used it in jQuery selector.

<table class="maandrendementen"> <!-- added class -->
  <tr>
    <th>jan</th>
    <th>feb</th>
    <th>mar</th>
    <th>apr</th>
    <th>may</th>
    <th>jun</th>
    <th>jul</th>
    <th>aug</th>
    <th>sep</th>
    <th>oct</th>
    <th>nov</th>
    <th>dec</th>
  </tr>
  <tr>
    <td>-0,23%</td>
    <td>0,57%</td>
    <td>0,39%</td>
    <td>-1,24%</td>
    <td>-0,59%</td>
    <td>-1,37%</td>
    <td>-0,85%</td>
    <td>0,80%</td>
    <td>1,94%</td>
    <td>0,68%</td>
    <td>-1,35%</td>
    <td>2,69%</td>
  </tr>
</table>

Change javascript to this (notice commas changed to dots in numbers - floating-point number need dot as a separator):

$(document).ready(function () {

var cell = $('table.maandrendementen td');

cell.each(function() {
//remove % and change to float
var cell_value = parseFloat($(this).html().slice(0, -1));

// Positief

if ((cell_value >= 0) && (cell_value <= 0.3)) {
    $(this).css({'background-color' : '#7FFF95'});   
} 
else if ((cell_value >= 0.31) && (cell_value <= 0.5)) {
    $(this).css({'background-color' : '#66FF7C'});
} 
else if ((cell_value >= 0.51) && (cell_value <= 0.7)) {
    $(this).css({'background-color' : '#4DFF63'});
} 
else if ((cell_value >= 0.71) && (cell_value <= 1)) {
    $(this).css({'background-color' : '#33F749'});
}
else if ((cell_value >= 1.01) && (cell_value <= 1.5)) {
    $(this).css({'background-color' : '#1ADE30'});
}
else if (cell_value >= 1.5) {
    $(this).css({'background-color' : '#00CC66'});
}

// Negatief

else if ((cell_value >= -0.01) && (cell_value <= -0.2)) {
    $(this).css({'background-color' : '#F6ADAC'});
}
else if ((cell_value >= -0.31) && (cell_value <= -0.5)) {
    $(this).css({'background-color' : '#F18483'});
}
else if ((cell_value >= 0.51) && (cell_value <= -0.7)) {
    $(this).css({'background-color' : '#EF706E'});
}
else if ((cell_value >= -0.71) && (cell_value <= -1)) {
    $(this).css({'background-color' : '#ED5B5A'});
}
else if ((cell_value >= -1.01) && (cell_value <= -1.5)) {
    $(this).css({'background-color' : '#EB4745'});
}
else if (cell_value >= -1.5) {
    $(this).css({'background-color' : '#E93331'});
}

});

});

Now it's working - see http://jsfiddle.net/7pv3fw9d/

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You need to use numerical comparison, so you need to convert the value to a number. Since you are dealing with decimal values, . notation is used in javascript as the decimal separator so you need to use replace() to replace , with . then you need to remove the % from the string.

$(document).ready(function() {

  var cell = $('table.maandrendementen td');

  cell.each(function() {
    var cell_value = +$(this).html().trim().replace(',', '.').replace('%', '');

    // Positief

    if ((cell_value >= 0) && (cell_value <= 0.3)) {
      $(this).css({
        'background': '#7FFF95'
      });
    } else if ((cell_value >= 0.31) && (cell_value <= 0.5)) {
      $(this).css({
        'background': '#66FF7C'
      });
    } else if ((cell_value >= 0.51) && (cell_value <= 0.7)) {
      $(this).css({
        'background': '#4DFF63'
      });
    } else if ((cell_value >= 0.71) && (cell_value <= 1)) {
      $(this).css({
        'background': '#33F749'
      });
    } else if ((cell_value >= 1.01) && (cell_value <= 1.5)) {
      $(this).css({
        'background': '#1ADE30'
      });
    } else if (cell_value >= 1.5) {
      $(this).css({
        'background': '#00CC66'
      });
    }

    // Negatief
    else if ((cell_value >= -0, 01) && (cell_value <= -0, 2)) {
      $(this).css({
        'background': '#F6ADAC'
      });
    } else if ((cell_value >= -0, 31) && (cell_value <= -0, 5)) {
      $(this).css({
        'background': '#F18483'
      });
    } else if ((cell_value >= 0, 51) && (cell_value <= -0, 7)) {
      $(this).css({
        'background': '#EF706E'
      });
    } else if ((cell_value >= -0, 71) && (cell_value <= -1)) {
      $(this).css({
        'background': '#ED5B5A'
      });
    } else if ((cell_value >= -1, 01) && (cell_value <= -1, 5)) {
      $(this).css({
        'background': '#EB4745'
      });
    } else if (cell_value >= -1, 5) {
      $(this).css({
        'background': '#E93331'
      });
    }

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="maandrendementen">
  <tr>
    <th>jan</th>
    <th>feb</th>
    <th>mar</th>
    <th>apr</th>
    <th>may</th>
    <th>jun</th>
    <th>jul</th>
    <th>aug</th>
    <th>sep</th>
    <th>oct</th>
    <th>nov</th>
    <th>dec</th>
  </tr>
  <tr>
    <td>-0,23%</td>
    <td>0,57%</td>
    <td>0,39%</td>
    <td>-1,24%</td>
    <td>-0,59%</td>
    <td>-1,37%</td>
    <td>-0,85%</td>
    <td>0,80%</td>
    <td>1,94%</td>
    <td>0,68%</td>
    <td>-1,35%</td>
    <td>2,69%</td>
  </tr>
</table>

Upvotes: 1

Related Questions