2015-07-13 14 views
1

Я хочу изменить цвет фона каждой ячейки на основе значения. Но я не могу заставить его работатьИзменение цвета фона на основе значения ячейки

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

Любая помощь будет принята с благодарностью

+0

'0,3' не считается числовое значение в JS. Вам нужно заменить ',' на '.' В HTML-ячейке ячейки, а затем использовать 'parseFloat', чтобы преобразовать его в действительное числовое значение, а затем выполнить'> = '<=' операции на нем –

ответ

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>

0

Прежде всего, необходимо удалить знак '%', а затем разобрать это в поплавка. Также вы не добавили класс «maandrendementen» в свой HTML-код, но вы использовали его в селекторе 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/

0

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

}); 
Смежные вопросы