If I want to verify if each element has a specific class when creating tables and clicking on the corresponding cells above them,
This is what I have tried.
However, it did not work as expected.
How can I make this work correctly?
What am I missing here?
Thank you
$("td.number").click(function(){
id=$(this).index();
$("td.color").index(id).hasClass("aqua");
});td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
.number{
cursor:pointer;}
table {
border-collapse: collapse;
}
.color{
padding:5px;
}
.aqua {
background-color: aqua;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=calendar></div>
<script>
let html = ''
html += '<table>';
let i = 0;
html += '<tr>';
for (let d = 0; d < 15; d++) {
i = i + 1;
html += '<td class="number">' + i +'</td>'
}
html += '</tr>';
for (let w = 0; w < 1; w++) {
html += '<tr>';
for (let d = 0; d < 15; d++) {
html += '<td class="color"></td>'
}
html += '</tr>';
}
html += '</table>'
document.querySelector('#calendar').innerHTML = html;
const arr = [1, 2, 10, 11, 14];
$("td.color")
.filter(function() { return arr.includes($(this).index()+1); })
.addClass('aqua');
</script>