Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<table>
    <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>
</body>
</html>
 
$(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()));
    });
​
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers