How to overlay correctly in html tables

user_6724844 0
Viewed 55

When I click each cells, layer counts of following 20 cells will increase.

But my desired result is to decrease layer counts when I red class is removed.

At this time, it always increases and I couldn't come up with how to decrease layer counts in the following 20 cells.

It doesn't matter how to write if we can achieve it.

Is there any sophisticated way to achieve this?

const layerArray=["layer1","layer2","layer3","layer4"];

var ArrLen=layerArray.length;     


$(function() {
  $("td").click(function() {
    $(this).children().toggleClass('red');
    
    index=$("td").index(this);
    
      $("td").slice(index+1,index+20).each(function() {
     
     var classIndex = $(this).data('layer');
     
     classIndex++;
     
     if(classIndex < (ArrLen-1)) {
          
     $(this).addClass(layerArray[classIndex-1]);

     }  else {

    $(this).addClass(layerArray[ArrLen-1]);
     }
        
    $(this).data('layer',classIndex);
    });
  });
});
td {
  transition-duration: 0.5s;
    border: solid black 1px;
  cursor:pointer;
}

div{
  padding: 5px;

}

table {
  border-collapse: collapse;
}

.red{
  background-color:red;}
  
  
.layer1{
    background-color: hsl(60, 90%, 90%);}    

.layer2{
    background-color: hsl(40, 90%, 90%);}    
    
.layer3{
    background-color: hsl(20, 90%, 90%);}    

.layer4{
    background-color: hsl(0, 90%, 90%);}    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>


<script>
Html =' '
Html += '<table>';
let i =0;
for (let w = 0; w < 10; w++) {
    Html += '<tr>';
    for(let d=0; d<10;d++){
           i=i+1;
           Html += '<td data-layer=0>'+'<div>'+i+'</div>'+'</td>'
    }   
    Html += '</tr>';
}
Html +='</table>'

document.querySelector('#calendar').innerHTML = Html;
</script>

css html jquery javascript
1 Answers

We can make use of the data-layer you have given to each table cell. We know that you can only click one table cell at a time. We also know that we are adding the layers sequentially (1, then 2, then 3, and finally 4).

We can check if the clicked table cell still has the red class. If it does, adjust the value so that the next 20 table cells' data-layer attributes will be incremented by 1. If it doesn't, decrement by 1. As the layers are added sequentially, we can also remove each layer based on the data-layer value. If it is 4 and then decreased by 1, we know that we need to remove layer4. If it is 3 and then decreased by 1, we know that we need to remove layer3. The same logic applies for layer1 and layer2 removal.

Although not necessary, you should probably use the camelcase as it is pretty much the accepted practice for writing variables in JS.

const layerArray = ["layer1", "layer2", "layer3", "layer4"];

var arrLen = layerArray.length;


$(function() {
  $("td").click(function() {
    $(this).children().toggleClass('red');
    let index = $("td").index(this);
    let layerChange = $(this).children().hasClass('red') ? 1 : -1;
    
    $("td").slice(index + 1, index + 20).each(function() {
      let classIndex = $(this).data('layer');
      classIndex += layerChange;

      if (layerChange === 1 && classIndex - 1 < arrLen) {
        $(this).addClass(layerArray[classIndex - 1])
      } else if (layerChange === -1 && classIndex >= 0) {
        $(this).removeClass(layerArray[classIndex])
      }

      $(this).data('layer', classIndex);
    });
  });
});
td {
  transition-duration: 0.5s;
  border: solid black 1px;
  cursor: pointer;
}

div {
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.red {
  background-color: red;
}

.layer1 {
  background-color: hsl(60, 90%, 90%);
}

.layer2 {
  background-color: hsl(40, 90%, 90%);
}

.layer3 {
  background-color: hsl(20, 90%, 90%);
}

.layer4 {
  background-color: hsl(0, 90%, 90%);
}
<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;
  for (let w = 0; w < 10; w++) {
    html += '<tr>';
    for (let d = 0; d < 10; d++) {
      i = i + 1;
      html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
    }
    html += '</tr>';
  }
  html += '</table>'
  document.querySelector('#calendar').innerHTML = html;
</script>

user_90602230
Related