javascript - 表格 - 单击边框时选择一个单元格

Question

这个想法是有一个网格，当你点击它们时改变任何单元格的颜色。我的解决方案是制作一张 table :

var htmlElements = ""; // storing the whole table here

for (var r = 0; r < 40; r++) { // creating the table row by row
  htmlElements += '<tr>';

  for (var c = 0; c < 40; c++) { // and column by column
    htmlElements += '<td class="black" id="cell-' + r.toString() + '-' + c.toString() + '"></td>';
  }

  htmlElements += '</tr>'
}


var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;

var allTableCells = document.querySelectorAll("td"); // adding all cells to an array

for (var i = 0; i < allTableCells.length; i++) {
  allTableCells[i].addEventListener("click", function() { // when click any cell
    let stringID = this.id.split('-');

    if (this.className == "black") {
      this.className = "white";
    } else {
      this.className = "black";
    }
  });
}

table,
td {
  border: 1px solid #555;
  border-collapse: collapse;
}

.white { background-color: white;}
        .black { background-color: black;}

<table id="tab">

</table>

我需要小的细胞，这是个问题。当单元格太小时，您经常会错过并点击边框，因此没有任何变化。当我不小心单击边框时，如何选择最近的单元格？也许使用 Canvas ？

附言在本网站 -> https://bitstorm.org/gameoflife/你没有那个问题。我希望我的网格像那个一样

Answer 1

在您附加的网站上，他使用的是 Canvas ，而不是表格。

如果您想坚持使用表格，我想您可以尝试将鼠标悬停在单元格上时将单元格的大小加倍，然后您将能够捕捉到点击。

我对您的代码做了一些修改，您可以在下面的 JSFIDDLE 中看到，我根本没有碰你的 JS，因为那不是你的问题。

HTML

<table id="tab"></table>

CSS

td {
  height: 1px;
}

tr {
  width: 1px;
}

td:hover {
  transform: scale(10, 8);
}

.black {
  background: black;
}

.white {
  background: white;
}