主页 / 问题 / 1602834
Accepted
alexWithoutBeard
Asked:2024-12-19 20:09:50 +0000 UTC2024-12-19 20:09:50 +0000 UTC

如何从表中获取列并限制其中激活单元格的数量

  • 772

有必要确保一列中不能激活超过五个单元格。我试图从列中获取 td.active 的数量，但出现了一些奇怪的情况） 

let table = document.querySelector("table");

table.addEventListener("click", ({ target }) => {
  if (target.tagName == "TD") {
    let trs = document.querySelectorAll("tr");
    for (let tr of trs) {
      let cols = tr.querySelectorAll("td.active");
      console.log(cols.length)
      if (cols.length <= 5) {
        target.classList.add("active");
      }
      else target.classList.remove('active')
    }
  }
});
 table {
    width: 500px;
    height: 500px;
    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;
    width: 40px;

  }
: 5px;
    border: 
  .active{
    background-color: aqua;
    pointer-events: none;

  }
  .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>
        <td data-col="5"></td>
      </tr>
      <tr>
        <td data-col="6"></td>
        <td data-col="7"></td>
        <td data-col="8"></td>
        <td data-col="9"></td>
        <td data-col="10"></td>
        <td data-col="11"></td>
      </tr>
      <tr>
        <td data-col="12"></td>
        <td data-col="13"></td>
        <td data-col="14"></td>
        <td data-col="15"></td>
        <td data-col="16"></td>
        <td data-col="17"></td>
      </tr>
      <tr>
        <td data-col="18"></td>
        <td data-col="19"></td>
        <td data-col="20"></td>
        <td data-col="21"></td>
        <td data-col="22"></td>
        <td data-col="23"></td>
      </tr>
      <tr>
        <td data-col="24"></td>
        <td data-col="25"></td>
        <td data-col="26"></td>
        <td data-col="27"></td>
        <td data-col="28"></td>
        <td data-col="29"></td>
      </tr>
      <tr>
        <td data-col="30"></td>
        <td data-col="31"></td>
        <td data-col="32"></td>
        <td data-col="33"></td>
        <td data-col="34"></td>
        <td data-col="35"></td>v
      </tr>
      
    </table>

javascript

1 个回答

  1. Best Answer

    有必要确保一列中不能激活超过五个单元格。

    可以这样做，例如，像这样......

    const table = document.querySelector("table");
const max = 5

table.addEventListener("click", e => {
  const o = e.target.closest('td')
  if (!o) return
  const oc = o.classList
  if (oc.contains('active')) {
    oc.remove('active')
    return
  }
  let n = [...o.closest('tr').querySelectorAll('td')].indexOf(o)
  n = table.querySelectorAll(`tr td:nth-child(${n + 1}).active`).length
  if (n < max) oc.add('active')
});
    table {
  width: 500px;
  height: 500px;
  margin-bottom: 20px;
}

table tr {
  font-weight: bold;
  padding: 5px;
  border: 1px solid black;
}

table td {
  border: 1px solid black;
  padding: 5px;
  height: 40px;
  width: 40px;

}

.active {
  background-color: aqua;
  /*pointer-events: none;*/
}
.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>
    <td data-col="5"></td>
  </tr>
  <tr>
    <td data-col="6"></td>
    <td data-col="7"></td>
    <td data-col="8"></td>
    <td data-col="9"></td>
    <td data-col="10"></td>
    <td data-col="11"></td>
  </tr>
  <tr>
    <td data-col="12"></td>
    <td data-col="13"></td>
    <td data-col="14"></td>
    <td data-col="15"></td>
    <td data-col="16"></td>
    <td data-col="17"></td>
  </tr>
  <tr>
    <td data-col="18"></td>
    <td data-col="19"></td>
    <td data-col="20"></td>
    <td data-col="21"></td>
    <td data-col="22"></td>
    <td data-col="23"></td>
  </tr>
  <tr>
    <td data-col="24"></td>
    <td data-col="25"></td>
    <td data-col="26"></td>
    <td data-col="27"></td>
    <td data-col="28"></td>
    <td data-col="29"></td>
  </tr>
  <tr>
    <td data-col="30"></td>
    <td data-col="31"></td>
    <td data-col="32"></td>
    <td data-col="33"></td>
    <td data-col="34"></td>
    <td data-col="35"></td>v
  </tr>

</table>

    • 2

相关问题