Как обнаружить элемент и разрезать на группы в html таблицах

Question

Я работаю с HTML таблицами и мне нужно добиться изменения цвета определенным образом. Мой желаемый результат такой, как описано ниже.

Нижний рисунок показывает, что предполагается, что текущее состояние - верхний показатель, затем щелкается ячейка 1, верхний показатель становится похожим на нижний.

Я хотел бы выбрать элемент first, а затем добавить класс 'aqua' после 5 ячеек, включая первую ячейку.

Я достиг, чтобы выбрать first Ячейки среди этих нажатых ячеек, но я не могу понять, как определить после 5 ячеек, у которых есть «класс».

Если у кого-то есть мнение, пожалуйста, дайте мне знать

Спасибо

$("td").click(function() {
  $(this).addClass("red");
  $("td.aqua").removeClass("aqua");
  $("td.red").first().addClass("aqua");
  
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
  cursor:pointer;
}

table {
  border-collapse: collapse;
}

.red {
background-color:red;}

.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;


for (let w = 0; w < 5; w++) {
  html += '<tr>';
  for (let d = 0; d < 10; d++) {
    i=i+1;
    html += '<td>'+ i+'</td>'
    }
    html += '</tr>';
  }
html += '</table>'
document.querySelector('#calendar').innerHTML = html;


</script>

Answer 1

Это то, что вы хотите?

$("table").on("click", "td", function(ev) {
  $(this).removeClass("aqua").addClass("red");

  let nextRowIdx = this.parentNode.rowIndex,
      nextCellIdx = this.cellIndex + 5;
  if (nextCellIdx >=10) {
    nextRowIdx += 1;
    nextCellIdx -= 10;
  }
  try {
    let tbl = this.parentNode.parentNode,
        cell = tbl.children[nextRowIdx].children[nextCellIdx];
    $(cell).removeClass("red").addClass("aqua");
  } catch (err) {
  }
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
  cursor:pointer;
}

table {
  border-collapse: collapse;
}

.red {
background-color:red;}

.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;


for (let w = 0; w < 5; w++) {
  html += '<tr>';
  for (let d = 0; d < 10; d++) {
    i=i+1;
    html += '<td>'+ i+'</td>'
    }
    html += '</tr>';
  }
html += '</table>'
document.querySelector('#calendar').innerHTML = html;

</script>

Answer 2

Я не уверен на 100%, что я правильно понимаю, что вам нужно сделать, но это раскрасит нажатую ячейку цвета морской волны и следующие 5 ячеек в красный. Даже если это не совсем то, что вам нужно, оно должно направить вас в правильном направлении.

$('body').on('click', "td", function() {
  let _this = this;
  let _index = -1;
  $(this).parents('table').find('td').each(function(i, el){
    if(el == _this){
      _index = i;
    }
    if (_index > -1 && i > _index && i < (_index + 6)){
      console.log(i);
      $(el).addClass('red');
    }
  });
  $(this).addClass("aqua");
});

На логическом уровне вам необходимо провести l oop через все ваши td элементы и определить, какой из щелкнув по ним, получите индекс, если он есть, а затем добавьте класс red к следующим 5 элементам. Примените класс aqua к выбранному классу в конце или в начале.