根据单元格值更改背景颜色

Question

我想根据值更改每个单元格的背景颜色。但我不能让它工作

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'}); 
     } 
    }); 
}); 

任何帮助，将不胜感激

Answer 1

您需要使用数值比较，所以你需要将值转换为数字。由于您使用的是十进制值，因此在javascript中使用.表示法作为小数分隔符，因此您需要使用replace（）将,替换为.，然后您需要从字符串中删除%。

$(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>

Answer 2

首先，你需要删除 '％' 符号，然后解析成浮点这一点。您还没有在您的HTML代码中添加'maandrendementen'类，但是您已经在jQuery选择器中使用了它。

<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> 

更改JavaScript这个（通知逗号改为点的号码 - 浮点数需要点作为分隔符）：

$(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'}); 
} 

}); 

}); 

现在，它的工作 - 看http://jsfiddle.net/7pv3fw9d/

Answer 3

1。将字符串转换为数字

在比较之前，您必须将'1,6%'字符串解析为数字， a var value = Number('1,6%'.replace(',', '.').replace('%', ''));

2.生成地图上，而不是使用难看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())); 
    }); 

});