Как с помощью JavaScript создать таблицу с заливкой ячеек в зависимости от значений?

Question

[Михаил Кулигин]

Нужно создать таблицу, ячейки которой будут иметь фон в зависимости от значения, помещенного в ячейку.
Значения будут подгружаться из csv файла.
Значения находятся в диапазоне от -1 до 1.
Фон:
при -1 - синий с дальнейшими градациями при увеличении значения до нуля
при 1 - красный, с дальнейшими градациями при уменьшении значения до нуля
0 - серый или белый.

Я вижу 2 варианта решения (хотелось бы реализовать именно второй вариант):
1. Сгенерировать словарь вида значение:цвет, допустим, 10 градаций красного и 10 градаций синего, потом через цикл проверять значение, но хотелось бы плавно менять цвет.
2. Динамически плавно менять цвет, а не использовать фиксированный набор, как в варианте 1.

Вариант 1 реализуется ручной вбивкой значений в словарь.
Собственно сам вопрос:
как в цикле сдвигать цвет от красного #FF0000 до белого и от синего #0000FF до белого в HEX формате.

Comments

[Сергей Попов]

Не вижу вопроса в вопросе. Вы хотите, чтобы вам написали скрипт? Отлично, тогда заказывайте у фрилансеров. Вы хотите, чтобы вам помогли? Тогда сформулируйте грамотно, чем вам помочь.

[RidgeA]

на всякий случай уточню, что

FF0000

и

0000FF

это числа.
Может это поможет ...

Answer 1

[0xD34F]

const rows = 10;
const cols = 5;

// создаём таблицу
document.body.innerHTML = `
  <table>${Array.from({ length: rows }, () => `
    <tr>${Array.from({ length: cols }, () => `
      <td>${Math.random() * [1, -1][Math.round(Math.random())]}</td>`).join('')}
    </tr>`).join('')}
  </table>`;

// назначаем цвета
document.querySelectorAll('table td').forEach(n => {
  const val = +n.textContent;
  const colorPart = (0xFF * (1 - Math.abs(val)) | 0)
    .toString(16)
    .padStart(2, 0)
    .repeat(2);

  n.style.backgroundColor = val < 0
    ? `#${colorPart}FF`
    : `#FF${colorPart}`;
});

Comments

[Михаил Кулигин]

Перенес ваш пример в свой codepen, но таблица теперь не отображает цвета. Подключен jquery.min.js.
Может что то еще нужно подключить?
Спасибо за такой пример, буду ковырять до полного просветления. А то я хотел через преобразование в RGB пытаться что то сделать.

[Михаил Кулигин]

Михаил Кулигин, Михаил Кулигин, отбой, скобка не скопировалась последняя