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

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

$（文档）.ready（函数（）{
变量单元格=$（'table.maandrendementen td'）；
cell.each（function（）{
var cell_value=$（this.html（）；
//假定
如果（（单元格数值>=0）&&（单元格数值=0,31）&（单元格数值=0,51）&（单元格数值=0,71）&&（单元格数值=1,01）&（单元格数值=1,5）{
$（this.css（{'background'：'#00CC66'}）；
}
//否定
如果（（单元格数值>=-0,01）和（&（单元格数值=-0,31）和（&（单元格数值=0,51）和（&（单元格数值=-0,71）和（&（单元格数值=-1,01）和（&）（单元格数值=-1,5）{
$（this.css（{'background'：'#E93331'}）；
}
});
});

---

如果您需要任何帮助，我们将不胜感激。

您需要使用数字比较，因此需要将值转换为数字。由于您处理的是十进制值，

符号在javascript中用作十进制分隔符，因此您需要使用replace（）要用

替换

，

，则需要从字符串中删除

%

$（文档）.ready（函数（）{
变量单元格=$（'table.maandrendementen td'）；
cell.each（函数（）{
var cell_value=+$（this.html（）.trim（）.replace（“，”，“）.replace（“%，”）.replace（“%，”）；
//假定
如果（（单元格数值>=0）&&（单元格数值=0.31）&（单元格数值=0.51）&&（单元格数值=0.71）&&（单元格数值=1.01）&（单元格数值=1.5）{
$（this.css）({
“背景”：“00CC66”
});
}
//否定
如果（（单元格数值>=-0,01）和（&&（单元格数值=-0,31）和（&（单元格数值=0,51）和（&（单元格数值=-0,71）和（&（单元格数值=-1,01）和（&）（单元格数值=-1,5）{
$（this.css）({
“背景”：“E93331”
});
}
});
})；

简
2月
破坏
四月
也许
六月
7月
八月
九月
十月
十一月
12月
-0,23%
0,57%
0,39%
-1,24%
-0,59%
-1,37%
-0,85%
0,80%
1,94%
0,68%
-1,35%
2,69%

首先需要删除“%”符号，然后将其解析为float。此外，您还没有在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>

简
2月
破坏
四月
也许
六月
7月
八月
九月
十月
十一月
12月
-0,23%
0,57%
0,39%
-1,24%
-0,59%
-1,37%
-0,85%
0,80%
1,94%
0,68%
-1,35%
2,69%

将javascript更改为此（请注意，逗号更改为数字中的点-浮点数需要点作为分隔符）：

$（文档）.ready（函数（）{
变量单元格=$（'table.maandrendementen td'）；
cell.each（函数（）{
//删除%并更改为浮动
var cell_value=parseFloat（$（this.html（）.slice（0，-1））；
//假定
如果（（单元格数值>=0）&&（单元格数值=0.31）&（单元格数值=0.51）&&（单元格数值=0.71）&&（单元格数值=1.01）&（单元格数值=1.5）{
$（this.css（{'background-color'：'#00CC66'}）；
}
//否定
否则如果（（单元格数值>=-0.01）和（&（单元格数值=-0.31）和（&（单元格数值=0.51）和（&（单元格数值=-0.71）和（&（单元格数值=-1.01）和（&（单元格数值=-1.5）{
$（this.css（{'background-color'：'#E93331'}）；
}
});
});

现在它工作了-请参见

1。将字符串转换为数字 在比较之前，必须将

'1,6%'

字符串解析为一个数字， a

var值=数字（'1,6%'。替换（'，'，'）。替换（'%，''）

2.构建地图，而不是使用丑陋的

if

（）

$（文档）.ready（函数（）{
变量单元格=$（'table td'）；
var minColor='红色'；
var maxColor='绿色'；
var mapColor=[
{
值：-2.0，
颜色：“红色”
},
{
值：-0.1，
颜色：“橙色”
},
{
数值：0.1，
颜色：“灰色”
},
{
数值：0.2，
颜色：“蓝色”，
},
{
数值：0.5，
颜色：“#66FF7C”
}
];
函数getColor（值）{
value=+value.trim（）.replace（/，/g，“）.replace（“%”，“）；
if（值对于（var i=0；i
0,3
在JS中不被视为数值。您需要在单元格的HTML中将
，
替换为
，然后使用
parseFloat
将其转换为有效的数值，然后执行
=
<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>

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

});

});

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

});