如何加深html表格中重叠单元格的颜色

Question

我有 html 表格，我想加深重叠单元格中的颜色。

例如，当我单击 cell 时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() {&nbsp; $("td").click(function() {&nbsp; &nbsp; $(this).nextAll(':lt(4)').each(function(i) {&nbsp; &nbsp; if ($(this).hasClass("color2")) {&nbsp; &nbsp; &nbsp; $(this).addClass('color3');&nbsp; &nbsp; }&nbsp; &nbsp; else if ($(this).hasClass("color")) {&nbsp; &nbsp; &nbsp; $(this).addClass('color2');&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; $(this).addClass('color');&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; console.log(i);&nbsp; });&nbsp; });});table td {&nbsp; width: 20px;&nbsp; overflow: hidden;&nbsp; display: inline-block;&nbsp; white-space: nowrap;&nbsp; border: 1px solid gray;&nbsp; text-align: center;&nbsp; padding: 5px;&nbsp; cursor: pointer;}.color {&nbsp; background-color: hsl(60,100%,95%);}.color2 {&nbsp; background-color: hsl(60,100%,90%);}.color3 {&nbsp; 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>它可能需要一些调整来删除不需要的类，但我测试过并且似乎可以按原样工作。