Как углубить цвет в перекрывающихся ячейках в таблице html

Question

У меня есть html таблиц, и я хотел бы углубить цвет в перекрывающихся ячейках.

Например, когда я щелкаю ячейку 2, .nextAll(':lt(5)') класс изменения метода следующий 4 ячейки.

И тогда, когда я нажму 3 ячейки, цвет изменится. Мой желаемый результат, как показано ниже. цвет перекрывающихся ячеек изменится в соответствии с приведенной ниже формулой.

background-color: hsl(60,100%,95%); → background-color: hsl(60,100%,90%);

Есть ли способ чтобы понять это?

Спасибо.

$(function() {
  $("td").click(function() {
    $(this).nextAll(':lt(4)').addClass('color');
  });
});

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}
.color {
  background-color: hsl(60,100%,95%);
}
.color2 {
  background-color: hsl(60,100%,90%);
}
.color3 {
  background-color: hsl(60,100%,85%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

Answer 1

Вы можете связать функцию .each() с результатами .nextAll(), а затем использовать .hasClass(), чтобы индивидуально определить, какой цвет следует использовать для каждой ячейки.

$(function() {
  $("td").click(function() {
    $(this).nextAll(':lt(4)').each(function(i) {
		if ($(this).hasClass("color2")) {
			$(this).addClass('color3');
		}
		else if ($(this).hasClass("color")) {
			$(this).addClass('color2');
		}
		else {
			$(this).addClass('color');
		}
		
		console.log(i);
	});
  });
});

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}
.color {
  background-color: hsl(60,100%,95%);
}
.color2 {
  background-color: hsl(60,100%,90%);
}
.color3 {
  background-color: hsl(60,100%,85%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

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