Zmiana koloru komorki w zależności od watrości

pytanie zadane 15 września 2016 w JavaScript przez Kshyhoo Użytkownik (750 p.)

Witam. Borykam się z problemem zmiany koloru komórki w zależności od wartości. Nie wiem, jak mam pokolorować wartości od...do i wartości ujemne.

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script src="https://code.jquery.com/jquery-3.0.0.js" type="text/javascript"></script>
<title></title>

<script type="text/javascript">
window.onload=function(){
let colors = {
	'-10': '#ff0000',
	 '-5': '#ff9900',
	 '-3': '#ffff00',
		3: '#66ccff',
	    5: '#3366ff',
	   10: '#003366'
};

$("td").each(function() {
	let cell = ($(this).html());
	if (colors.hasOwnProperty(cell)){
  	$(this).css('background', colors[cell]);
  }
});
</script>
</head>

<body>
<table style="width:100%">
  <tbody>
		<tr>
			<td>-10</td>
			<td>-5</td> 
			<td>-3</td>
			<td>0</td>
		</tr>
		<tr>
			<td>0</td>
			<td>3</td> 
			<td>5</td>
			<td>5</td>
		</tr>
	</tbody>
</table>
  
</body>
</html>

Ten kod działa, ale chciałbym kolorować w zależności od zakresu:

mniej niż -10
od -5 do -10
od -3 do -5
od 0 do -3
od 0 do 3
od 3 do 5
od 5 do 10
powyżej 10

2 odpowiedzi

odpowiedź 16 września 2016 przez niezalogowany
wybrane 16 września 2016 przez Kshyhoo

Najlepsza

Zapisz kolory bardziej w ten deseń:

const colors = [
    {
      minVal: -10,
      colorVal: '#dd4555'
    },
    {
      minVal: -5,
      colorVal: '#ff9900'
    },
    ...
];

Przeiteruj przez wszystkie kolory, i sprawdzaj czy wartość z danej komórki jest większa(lub równa) niż minVal z iterowanego koloru -> jeśli tak -> nadaj background z kolorem colorVal

komentarz 16 września 2016 przez Kshyhoo Użytkownik (750 p.)

Nie bardzo wiem jak to zrobić, nie znam JS na tyle dobrze.

https://jsfiddle.net/07zcg0vm/6/

komentarz 16 września 2016 przez niezalogowany

http://codepen.io/Argeento/pen/xEVvoA

jQuery jak widzisz nie jest potrzebne.

Wstaw skrypt na koniec strony ( przed zamknięciem tagu </body>), a nie będzie potrzebne nawet zdarzenie onload.

komentarz 16 września 2016 przez niezalogowany

Zwróć jeszcze uwagę, że to działa na zasadzie > min. Musisz sam dopisać wyjątek, dla wszystkich liczb poniżej najniższej wartości : ) ale liczę, że już sobie poradzisz.