Считывание индекса клеток таблицы

Question

Функция не всегда коректно работает: при быстром перемещении мыши индексы не считываются, на некоторых устройствах считываются, только если водить мышью очень медленно.

function tblOnmouseover (event){   // index seting function
    let cell = event.target;
    if (cell.tagName.toLowerCase() == 'td'){
        rowIndex = cell.parentNode.rowIndex;
        colIndex = cell.cellIndex;
       // console.log(rowIndex,colIndex); //index check
    }

Ссылка на проект: https://github.com/x0VERLORDx/squears.git.

Начальная форма таблицы (4х4 + кнопки удаления и добавления строк) задана html/css.

Answer 1

Возможно, event.target -- div-ребенок.

Тогда прогуляйтесь к parentNode.

Answer 2

Всё верно - целевыми элементами должны быть div-ы, так как они полностью заполняют ячейки td, не оставляя места для срабатывания обработчиков:

  // table functions

  function tblOnmouseover(event) {
    // index seting function
    let cell = event.target;
    if (cell.tagName.toLowerCase() == "div") {
      rowIndex = cell.parentNode.parentNode.rowIndex;
      colIndex = cell.parentNode.cellIndex;
      // console.log(rowIndex,colIndex); //index check
    }
    moveDelColBtn();
    moveDelRowBtn();
    show();
  }

(function() {
  // initialysing variables

  let cols = 4;
  let rows = 4;
  let colIndex = 0;
  let rowIndex = 0;
  const boxSize = 54;
  const wraperPadding = 60;
  // initialysing elements

  const tbl = document.getElementsByClassName("table")[0];
  const addRowBtn = document.getElementsByClassName("addRowButton")[0];
  const addColBtn = document.getElementsByClassName("addColButton")[0];
  const delRowBtn = document.getElementsByClassName("delRowButton")[0];
  const delColBtn = document.getElementsByClassName("delColButton")[0];

  // event list

  tbl.addEventListener("mouseover", tblOnmouseover);
  tbl.addEventListener("mouseout", hide);
  delRowBtn.addEventListener("mouseover", show);
  delRowBtn.addEventListener("mouseout", hide);
  delColBtn.addEventListener("mouseover", show);
  delColBtn.addEventListener("mouseout", hide);
  delRowBtn.addEventListener("click", delRowBtnOnclick);
  delColBtn.addEventListener("click", delColBtnOnclick);
  addRowBtn.addEventListener("click", addRowBtnOnclick);
  addColBtn.addEventListener("click", addColBtnOnclick);

  // table functions

  function tblOnmouseover(event) {
    // index seting function
    let cell = event.target;
    if (cell.tagName.toLowerCase() == "div") {
      rowIndex = cell.parentNode.parentNode.rowIndex;
      colIndex = cell.parentNode.cellIndex;
      // console.log(rowIndex,colIndex); //index check
    }
    moveDelColBtn();
    moveDelRowBtn();
    show();
  }

  // onclick functions (buttons)

  function delRowBtnOnclick() {
    delRowBtn.style.opacity = 0;
    delRow();
  }

  function delColBtnOnclick() {
    delColBtn.style.opacity = 0;
    delCol();
  }

  function addRowBtnOnclick() {
    rowIndex = rows;
    addRow();
  }

  function addColBtnOnclick() {
    colIndex = cols;
    addCol();
  }

  // visibility changeing functions for del buttons

  function show() {
    if (rows > 1) {
      delRowBtn.style.opacity = 1;
    }
    if (cols > 1) {
      delColBtn.style.opacity = 1;
    }
  }

  function hide() {
    delColBtn.style.opacity = 0;
    delRowBtn.style.opacity = 0;
  }

  //function for moveing delColBtn

  function moveDelColBtn() {
    delColBtn.style.left = colIndex * boxSize + wraperPadding + "px";
  }

  // function for moveing delRowBtn

  function moveDelRowBtn() {
    delRowBtn.style.top = rowIndex * boxSize + wraperPadding + "px";
  }

  //adding functions

  //adding colon function

  function addCol() {
    for (let i = 0; i < rows; i++) {
      let currentRow = document.getElementsByTagName("tr")[i];
      let currentCell = document.getElementsByTagName("td")[i];
      let newCell = currentCell.cloneNode(true);
      currentRow.appendChild(newCell);
    }
    cols++;
  }

  //adding row function
  function addRow() {
    const currentRow = document.getElementsByTagName("tr")[0];
    let newRow = currentRow.cloneNode(true);
    tbl.appendChild(newRow);
    rows++;
  }

  //del functions
  //function for deleteing row with certain index
  function delRow() {
    if (rows > 1) {
      document.getElementsByTagName("table")[0].deleteRow(rowIndex);
      rows--;
    }
  }

  //function for deleteing colon with certain index
  function delCol() {
    let currentRow = document.getElementsByTagName("tr");
    let currentCell = document.getElementsByTagName("td");
    if (cols > 1) {
      for (let i = 0; i < currentRow.length; i++) {
        let rowD = currentRow[i];
        let currentCol = rowD.childNodes[colIndex];
        currentCol.parentNode.removeChild(currentCol);
      }
      cols--;
    }
  }
})();

#wraper {
  position: absolute;
  padding: 60px;
}

.table {
  border: 1px solid #70ace2;
  position: relative;
}

.square {
  width: 50px;
  height: 50px;
  background: #70ace2;
}

.delColButton,
.delRowButton {
  width: 50px;
  height: 50px;
  background: #b40e0e;
  position: absolute;
  border: none;
  margin: 4px;
  transition-duration: 0.2s;
}

.delColButton::after,
.delRowButton::after {
  content: "";
  background: white;
  height: 2px;
  width: 10px;
  position: absolute;
  left: 20px;
  top: 24px;
}

.delColButton:hover,
.delRowButton:hover {
  background: #bf5849;
}

.delRowButton {
  left: 0%;
}

.delColButton {
  top: 0%;
}

.addColButton,
.addRowButton {
  width: 50px;
  height: 50px;
  background: #e59a0c;
  position: absolute;
  margin: 4px;
  border: none;
}

.addColButton::after,
.addRowButton::after {
  content: "";
  background: white;
  height: 10px;
  width: 2px;
  position: absolute;
  left: 24px;
  top: 20px;
}

.addColButton:before,
.addRowButton:before {
  content: "";
  background: white;
  height: 2px;
  width: 10px;
  position: absolute;
  left: 20px;
  top: 24px;
}

.addColButton:hover,
.addRowButton:hover {
  background: #f9c25a;
}

.addColButton {
  top: 60px;
  right: 0%;
}

button:active,
button:focus {
  outline: none;
}

<div id="wraper">
  <button class="delColButton"></button>
  <button class="delRowButton"></button>
  <table class="table">
    <tr>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
      <td>
        <div class="square"></div>
      </td>
    </tr>
  </table>
  <button class="addColButton"></button>
  <button class="addRowButton"></button>
</div>

Можно попытаться сделать отступы в ячейках, но это лишнее усложнение стилей и хуже поддаётся настройке при масштабировании.

БЛОГ НА HUSL

Считывание индекса клеток таблицы

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