I attempted to create calendar-like tables,
In my script, I am trying to handle events being registered.
My goal is to change the classes of cells from 2 to 5 when they are clicked on, and change the cell colors from first to hovered to aqua.
For this purpose, I have set a variable called first, but it seems like I need to define a second variable as well.
Do you know of any solutions for this issue?
Appreciate your help!
var first;
$("td").on('click', function(){
first = this.id;
});
$("td").hover(function() {
const id = Number($(this).attr('id'));
$("table td").removeClass("aqua");
for(var j = first;j <= id; j++){
$("#"+j).addClass("aqua");
}
});
$("td").on('click', function(){
second = this.id;
});.aqua{
background-color: aqua;
}
td {
padding: 10px;
transition-duration: 0.4s;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
</tr>
<tr>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
</tr>
<tr>
<td id="9">9</td>
<td id="10">10</td>
<td id="11">11</td>
<td id="12">12</td>
</tr>
</table>