Генерация цветов?

Question

[DarkByte2015]

На страницу таблицей выводятся элементы, среди них могут быть дубликаты (определяется по совпадающему полю), у дубликатов на бэкэнде проставляется класс и id. Мне надо чтобы дубликаты подсвечивались (хотя бы просто backgroud-color) разными цветами. Ну в смысле дубликаты у которых id = 1 например красным, а у которых id = 2 - синим... Цвета рандомно. Главное чтобы у разных групп дубликатов (с разными id) они не повторялись. Как такое можно сделать?

Пример полученной разметки (внутри tr понятное дело еще много чего):

<tr id="0" class="duplicate"></tr> <!-- например тут background-color: red -->
<tr id="1" class=""></tr>
<tr id="0" class="duplicate"></tr> <!-- например тут background-color: red -->
<tr id="2" class=""></tr>
<tr id="3" class=""></tr>
<tr id="4" class="duplicate"></tr> <!-- а тут background-color: blue -->
<tr id="4" class="duplicate"></tr> <!-- а тут background-color: blue -->

P.S. Можно юзать чистый JS или лучше JQuery, но если возможно желательно сделать на одном только CSS. Я только не знаю можно ли на нем генерировать цвета...

Answer 1

[Виталий]

1. Параметр ID должен быть уникальным на всю страницу
2. Используйте JS - https://www.paulirish.com/2009/random-hex-color-co... и циклом для каждой итерации добавлять style для TD, который вложенный в TR с классом duplicate

Comments

[DarkByte2015]

1. Ну да, пусть data-id. 2. Неужели кроме цикла никак нельзя? Разве тут нельзя как-то использовать возможности селекторов?

[Виталий]

DarkByte2015: задача селектора - выбрать что что ... а у вас азада - генерировать цвета рандосный ... хотите селектором - можно замудриться через nth-child какой нить .. прописать 100500 строк с рандомными цвета ... вот только смысла нету

[DarkByte2015]

Виталий: Как именно вы себе представляете вариант с циклом? $('.duplicate') + attr('data-id') ? Выбрать все элементы с классом duplicate и сгруппировать их по data-id, а потом проставить у каждой группы один цвет? В js есть что-то вроде groupby? Типа как linq в c#.

[Виталий]

DarkByte2015: есть на jquery , то как то так https://jsfiddle.net/rim89/tqe6to3b/

Answer 2

[Ivan Bogachev]

Если количество различных id ограничено (100 штук к примеру) - то можно воспользоваться чистым CSS (codepen). Ну может не совсем чистым... и может это не совсем практично... но можно же?

Comments

[DarkByte2015]

Я не использую шаблонизаторы.