Как правильно наложить на html таблицы

Question

Когда я нажимаю на каждую ячейку, layer counts из following 20 cells увеличивается.

Но мой желаемый результат - уменьшение layer counts при удалении I red класса.

В настоящее время оно всегда увеличивается, и я не могу придумать, как уменьшить layer counts в следующих 20 ячейках.

Не имеет значения, как писать, если мы можем достичь этого.

Есть ли какой-нибудь изощренный способ добиться этого?

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>

Answer 1

Мы можем использовать data-layer, который вы дали каждой ячейке таблицы. Мы знаем, что вы можете щелкать только одну ячейку таблицы за раз. Мы также знаем, что мы добавляем слои последовательно (1, затем 2, затем 3 и, наконец, 4).

Мы можем проверить, имеет ли ячейка таблицы, по которой щелкнули мышью, красный класс. Если это так, измените значение так, чтобы атрибуты data-layer следующих 20 ячеек таблицы были увеличены на 1. Если этого не произойдет, уменьшите на 1. Поскольку слои добавляются последовательно, мы также можем удалить каждый слой на основе значение data-layer. Если это 4, а затем уменьшилось на 1, мы знаем, что нам нужно удалить layer4. Если это 3, а затем уменьшилось на 1, мы знаем, что нам нужно удалить layer3. Те же логики c применяются для удаления layer1 и layer2.

Хотя это и не обязательно, вам, вероятно, следует использовать верблюжий случай, так как это довольно распространенная практика для записи переменных в 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>