My goal is to enhance the color of overlapping cells in my HTML tables.
For instance, when I click on cell 2, the .nextAll(':lt(5)') method will change the class of the next 4 cells.
https://i.stack.imgur.com/mwv8x.png
Next, clicking on cell 3 will trigger a color change. The desired effect follows this formula:
background-color: hsl(60,100%,95%);background-color: hsl(60,100%,90%);https://i.stack.imgur.com/iKys9.png
Is there a method available to achieve this?
Thank you!
$(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>