Деактивировать возможность изменения ячеек вокруг выбранной ячейки

Question

Дана таблица, в которой мы выбираем ячейку и присваиваем ей класс с каким-то цветом. Необходимо сделать так, чтобы вокруг выбранной ячейки нельзя было нажать ни на одну ячейку. У меня хватило ума через nextsibling и previousibling это реализовать даже для предыдущих и последующих строк),но как сделать, чтобы верхние и нижние ячейки деактивировались.... пупупу)

let tds = document.querySelectorAll("td");
for (const td of tds) {
  td.addEventListener("click", function () {
    if(!this.classList.contains('active'))
      this.classList.add('active')

    if (this.previousElementSibling != null) {
      this.previousElementSibling.classList.add("diactive");
    } else {
      if (this.parentElement.previousElementSibling != null)
        this.parentElement.previousElementSibling.lastElementChild.classList.add(
          "diactive"
        );
   
    }

    if (this.nextElementSibling != null) {
      this.nextElementSibling.classList.add("diactive");
    } else {
      if (this.parentElement.nextElementSibling != null)
        this.parentElement.nextElementSibling.firstElementChild.classList.add(
          "diactive"
        );
    }
  });
}

 table {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid black;
    border-collapse: collapse; 
  }
  table tr {
    font-weight: bold;
    padding: 5px;
    border: 1px solid black;
  }
  table td {
    border: 1px solid black;
    padding: 5px;
    height: 40px;
  }

  .active{
    background-color: aqua;
  }
  .diactive{
    pointer-events: none;
  }

  <table>
      <tr>
        <td data-col="0"></td>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
        <td data-col="4"></td>
    </tr>
      <tr>
        <td data-col="0"></td>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
        <td data-col="4"></td>
    </tr>
      <tr>
        <td data-col="0"></td>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
        <td data-col="4"></td>
    </tr>
      <tr>
        <td data-col="0"></td>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
        <td data-col="4"></td>
    </tr>
    </table>

Answer 1

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

Предложу такой вариант...

document.querySelector('table').addEventListener('click', e => {
  const o = e.target.closest('td')
  if (!o) return
  if (!ok(o)) return
  o.classList.toggle('active')
})
const lr = (o, k) => o[k + 'ElementSibling']?.classList.contains('active')
const ud = (o, k, i) => {
  const el = o?.[k + 'ElementSibling']
  if (!el) return false
  return [i - 1, i, i + 1].some(v => el.querySelector(`[data-col="${v}"]`)?.classList.contains('active'))
}
//
function ok(el) {
  if (el.classList.contains('active')) return true
  if (lr(el, 'previous')) return false
  if (lr(el, 'next')) return false
  const i = +el.dataset.col
  let o = el.closest('tr')
  if (ud(o, 'previous', i)) return false
  if (ud(o, 'next', i)) return false
  return true
}

table {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid black;
    border-collapse: collapse; 
  }
  table tr {
    font-weight: bold;
    padding: 5px;
    border: 1px solid black;
  }
  table td {
    border: 1px solid black;
    padding: 5px;
    height: 40px;
  }

  .active{
    background-color: aqua;
  }
  .diactive{
    pointer-events: none;
  }

<table>
      <tr>
        <td data-col="0"></td>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
        <td data-col="4"></td>
    </tr>
      <tr>
        <td data-col="0"></td>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
        <td data-col="4"></td>
    </tr>
      <tr>
        <td data-col="0"></td>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
        <td data-col="4"></td>
    </tr>
      <tr>
        <td data-col="0"></td>
        <td data-col="1"></td>
        <td data-col="2"></td>
        <td data-col="3"></td>
        <td data-col="4"></td>
    </tr>
    </table>

БЛОГ НА HUSL

Деактивировать возможность изменения ячеек вокруг выбранной ячейки

Ответы (1 шт):