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

时间：2015-07-13 08:14:13

标签： jquery html

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

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

非常感谢任何帮助

3 个答案:

答案 0 :(得分：1)

您需要使用数值比较，因此您需要将值转换为数字。由于您正在处理十进制值，因此在javascript中使用.表示法作为小数分隔符，因此您需要使用replace（）将,替换为.，然后您需要删除{ {1}}来自字符串。

＆＃13;
＆＃13; 
%
＆＃13; 
$(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'
      });
    }

  });

});
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

首先，您需要删除'％'符号，然后将其解析为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>

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

答案 2 :(得分：0)

1。将字符串转换为数字

在比较之前，您必须将'1,6%'字符串解析为数字， 一个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()));
    });

});
相关问题
最新问题