изменить цвета ячеек в таблице

170
26 ноября 2021, 23:30

Есть таблица, нужно задать цвет ячеек в колонке, таким образом, чтоб цвет менялся в зависимости от значения в ячейке.по аналогии с тепловой картой! диапазон цветов: minColor: '#f9f9f9' до maxColor: '#98c76b'

Answer 1

Как по мне, просто изменяйте альфа канал у цвета от 0 до 1 в зависимости от значения.

$("td").each(function(){      
   let a = +$(this).text()/100;      
   $(this).css('background-color', `rgba(152, 199, 108, ${a})`); 
});
td { 
  border:1px solid black; 
  padding: 4px 12px; 
  font-weight: bold; 
} 
tr { 
  background-color: white; 
} 
tr:nth-child(2n+1){ 
  background-color: #f0f0f0; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<table cellspacing="0" cellpadding="0"> 
  <tr><td>10</td><td>100</td></tr> 
  <tr><td>25</td><td>0</td></tr> 
  <tr><td>50</td><td>0</td></tr> 
</table>

Answer 2

Для начала я бы перешел от цветовой модели RGB к HSL. Тогда, задав оттенок и насыщенность раз и навсегда, в переменные minColor и maxColor я бы занес значение яркости, от самой маскимальной (светлой) до минимальной (темной). Да, именно так, чтобы minColor соотвествовало наименьшей величине.

Затем я бы определился с условиями для каждой колонки. То, что вы хотите, в экселе делается условным форматированием и требует задания условий. Например, должна ли быть наиболее темной ячейка с максимальной величиной в КАЖДОЙ колонке? Или ВО ВСЕХ колонках с величиной одного типа надо выяснить минимальную и максимальную величину? Или цвет ячейки зависит от порогового значения в ячейке (например, больше 75% - темная, и не станет еще темнее даже при значении в 100500%).

Ну а дальше просто. Разбиваем диапазон значений в ячейках (с учетом всех ограничений, если таковые будут) на столько частей, сколько % у вас получилось при вычитании maxColor из minColor, и проходимся скриптом по ячейкам, делая вычисления яркости и подставляя результат в свойства цвета в формате HSL/HSLA.

Например, у вас:

в одной ячейке значение 5 (и это минимум. переменная Min), 
в другой 30, 
в третьей 125 (и это максимум, переменная Max), 
цвет должен становиться светлее/темнее равномерно,
minColor = 100%,
maxColor = 70%

то скрипт в каждой ячейке сделает как-то так:

%SomeVariable% = cell.value / (Max - Min) * 100; // узнаем, какой % значение ячейки составляет от диапазона
%SomeVariable% = %SomeVariable% * (minColor - maxColor) / 100; // узнаем, какой % этот процент составляет от предусмотренного диапазона яркостей
%someOtherVariable% = minColor - %SomeVariable%; //вычитаем этот % из максимума яркости, т.к. нам надо чем больше значение, тем МЕНЬШЕ L.
cell.style.backgroundColor = "HSLA(0,100%," + %someOtherVariable% + "%, 1)"; // задаем цвет.
READ ALSO
Решение простоейшей задаче на с++

Решение простоейшей задаче на с++

ЗадачаОчень часто для работы со строками нам нужно сначала вычислить длину строки

107
Проблемы с функцией swap

Проблемы с функцией swap

Я написал код для симметрии матрицы относительно побочной диагонали, на он ругается на

87
Как работает строчка кода?

Как работает строчка кода?

Вообще не понимаю как работает "word[i] != word[len-i-1]"Пожалуйста, опишите как можно подробнее и "для чайников")

106
Не работает заполнение массива ГСЧ

Не работает заполнение массива ГСЧ

Есть очень интересная задачаНужно заполнить двумерный массив MxN случайными числами в диапазоне [-5; 10] с помощью ГСЧ, а потом посчитать среднее...

221