Javascript-форум - Подсветка строк таблицы по условию

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Подсветка строк таблицы по условию (https://javascript.ru/forum/dom-window/72123-podsvetka-strok-tablicy-po-usloviyu.html)

Подсветка строк таблицы по условию

Добрый день, Гуру

Есть массив цветов состоящий из 3х цветов
И есть таблица со значениями
Нужно чтобы строки с одинаковыми значениями подсвечивались цветами из массива по порядку, т.е. для первых одинаковых был нулевой элемент массива, для вторых одинаковых был 1 элемент массива, и т.д.
Как только цвета заканчиваются и выборка опять начинается с 0

Проблема как раз стоит в выборе цвета и его обнулении при достижении конца массива.

Додумался сделать чтобы оно рандомно брало номер массива, но это хорошо работает, когда цветов от 35 и более, а нужно чтобы оно цвета переберало по порядку

Если есть какие нибудь мысли - прошу помочь.

пример того что сделал https://jsfiddle.net/aecoxyyw/

так же ниже сам код

<table id="t1">
  <tr><td>1</td></tr>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>2</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>3</td></tr>
  <tr><td>3</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>4</td></tr>
</table>

var objT = document.getElementById('t1');
var r = objT.rows.length;
var color = ['white', 'grey', 'yellow'];
for (i = 1; i < r; i++) {
  var res_i = objT.rows[i].cells[0].innerHTML;
  var rand = Math.floor(Math.random() * color.length);
  for (j = 0; j < r; j++) {
    var res_j = objT.rows[j].cells[0].innerHTML;
    if (res_i == res_j) {
      objT.rows[j].style.background = color[rand];
    }
  }
}

https://jsfiddle.net/aecoxyyw/3/

<table id="t1">
  <tr><td>1</td></tr>
  <tr><td>1</td></tr>
  <tr><td>5</td></tr>
  <tr><td>2</td></tr>
  <tr><td>2</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>3</td></tr>
  <tr><td>3</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>4</td></tr>
</table>
<script>
(function(){
  var COLORS=['red','green','blue'],
      rows=document.querySelectorAll('#t1 tr'),
      last_value,
      color_index=-1,
      change_index=true;

  [].forEach.call(rows,function(row,index){
    var val=row.querySelector('td').innerHTML;
    if(val==last_value)
      return change_index=([row,rows[index-1]].forEach(function(node){
        node.style.backgroundColor=COLORS[color_index];
      })||true);

    if(change_index)
      color_index=!COLORS[++color_index]?0:color_index;

    change_index=false;
    last_value=val;
  });
})();
</script>

Спасибо за быстрый ответ

А если в таблице будет несколько столбцов, и искать нужно будет по 2 или 3 столбцу

я так понимаю, что

var val=row.querySelector('td').innerHTML;

Будет искать совпадения только по первому столбцу

Цитата:

Сообщение от alogin

я так понимаю, что
var val=row.querySelector('td').innerHTML;
Будет искать совпадения только по первому столбцу

Верно.

Цитата:

Сообщение от alogin

А если в таблице будет несколько столбцов, и искать нужно будет по 2 или 3 столбцу

Если нужно будет, поправите условия.
В вашем примере у таблицы 1 колонка.

Спасибо за ответ
Только недавно начал разбираться с js, не работал с querySelector
Я так понимаю что идет обращение к селекторам css
Но если я пишу

var val=row.querySelector('td:nth-child(2)').innerHTML;

Так я обращаюсь ко второй ячейке таблицы(как мне кажется :) ) но дает ошибку что не возможно прочитать свойство innerHTML

Ошибка в селекторе, но чет я не пойму как правильно обратиться ко 2й ячейке строки.

:) шифровка из центра ... индекс ячейки указать в строке 32

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table id="t1">
  <tr><td>1</td></tr>
  <tr><td>1</td></tr>
  <tr><td>5</td></tr>
  <tr><td>2</td></tr>
  <tr><td>2</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>3</td></tr>
  <tr><td>3</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>4</td></tr>
</table>
<script>
(function(i) {
  var c = ["red", "green", "blue"], a;
  [].forEach.call(document.querySelectorAll("#t1 tr"), function(d, e, b) {
    (b = b[++e]) && b.cells[i].textContent == d.cells[i].textContent ?
    (a || (a = c.shift()), d.style.backgroundColor = a, b.style.backgroundColor = a) :
     a && (c.push(a), a = void 0);
  });
})(0);
</script>


</body>
</html>

рони, действительно "шифровка", однако, по-моему, она излишня.
Безусловно красивое решение, но трудночитаемое.

Цитата:

Сообщение от Nexus

она излишня.

???

Народ, спасибо большое, все заработало
правда с примером nexus'a так и не разобрался и почему то к моей таблице он не заработал, а заработал пример Рони.
+ в карму обоим

Если возможно, то распишите логику работы ваших примеров

Цитата:

Сообщение от alogin

распишите логику работы ваших примеров

если ячейки двух соседних строк одинаковы красим их , цвет выкусываем из начала массива , иначе возвращаем использованный цвет в конец массива.

Цитата:

Сообщение от рони

???

"новичок" кода не поймет :)
Так, по-моему мнению, код читается лучше:

(function(i) {
	var colors = ["red", "green", "blue"], use_color;
	[].forEach.call(document.querySelectorAll("#t1 tr"), function(row, index, next_row) {
		next_row=next_row[++index];
		if(row.cells[i].textContent == next_row.cells[i].textContent){
			use_color=use_color || colors.shift();
			row.style.backgroundColor = use_color;
			next_row.style.backgroundColor = use_color;
		}else if(use_color){
			colors.push(use_color);
			use_color=undefined;
		};
	});
})(0);

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

Цитата:

Сообщение от Nexus

код читается лучше:

:thanks: :yes:

Цитата:

Сообщение от alogin

можно добавлять в конец массива первый элемент

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