主页 / 问题 / 1602423
Accepted
alexWithoutBeard
Asked:2024-12-14 20:10:12 +0000 UTC2024-12-14 20:10:12 +0000 UTC

禁用更改选定单元格周围单元格的功能

  • 772

我们得到一个表格，在其中选择一个单元格并为其指定一个具有某种颜色的类。必须确保所选单元格周围的任何单元格都不能被单击。我足够聪明，可以通过 nextsibling 和 previousibling 来实现这一点，即使对于前一行和后续行也是如此），但是我怎样才能使顶部和底部单元停用.... pupupu）

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>

javascript

1 个回答

  1. Best Answer

    我们得到一个表格，在其中选择一个单元格并为其指定一个具有某种颜色的类。必须确保所选单元格周围的任何单元格都不能被单击。

    我会建议这个选项...

    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>

    • 1

相关问题