Как при клике по ячейкам таблицы задать им цвет?

Question

[Tizi]

Стоит задача задать условия при клике на ячейку залить ее цветом.
я смог реализовать только заливку ячейки по содержимому.
а условие я не могу не как задать по содержимому ячейки.
кто знает что то подскажите или направте на нужную документацию
Таблица в песочнице
P.s: цифры заполняются рандомно в диапазоне от 1 до 3 включительно

Answer 1

[0xD34F]

const colors = [ 'green', 'blue', 'red' ];

$('table').on('click', 'td', function() {
  $(this).addClass(colors[$(this).text() - 1]);
})

$('table').find('td').text(() => 1 + Math.random() * 3 | 0);

UPD. Вынесено из комментариев:

Как залить ячейку по которой я нажал и ячейки вокруг нее в цвет из масива?

Так, например.

UPD.

не много не так. нужно залить все 1 цветом

https://jsfiddle.net/dockLj5t/

Comments

[Tizi]

Спасибо.
Могли бы вы объяснить вот эту строку
$(this).addClass(colors[$(this).text() - 1])

[Tizi]

вы добавляете класс к тому элементу по которому произошел клик. а вот дальше я не понимаю

[0xD34F]

Tizi, $(this).text() возвращает текст, содержащийся в ячейке - строковое представление числа, которое вы туда засунули, делаем - 1, вычитание автоматически вызывает преобразование текста в число, а единица - надо избавиться от той единицы, которую вы прибавляли к случайному значению. В результате получаем индекс, по которому достаём из массива нужный класс.

[Антон Швец]

0xD34F, хороший пример как можно улучшить читабельность кода в мелочах
Ведь можно было сделать

var colors={
     1: 'green',
     2: 'blue',
     3: 'red' 
};
.....
$(this).addClass(colors[$(this).text()]);

Наглядно и ничего не вычитается.
Или менее читабельно
var colors = [ ,'green', 'blue', 'red' ]

[Tizi]

Антон, а еще вопрос. как залить ячейку по которой я нажал и ячейки вокруг нее в цвет из масива??
цифра 1 - по ячейке вокруг
цифры 2 - 2 ячейки вокруг
цифра 3 - 3 ячейки.

[0xD34F]

дополнил ответ

[Tizi]

0xD34F, вы правы но не много не так. нужно залить все 1 цветом ( соответственно если цифра 1 то заливается все цветом зеленым. даже те ячейки которые вокруг нее не зависимо от цифры внутри нее.)

[0xD34F]

дополнил ответ ещё раз