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

Question

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

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>

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

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

Answer 1

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

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

正如您在下面的 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;
}

Answer 2

您的请求比您提出的要复杂一些。想象一下，一个td有另一个td邻居，单击两个td之间的边框时，应该标记哪一个？

此外，无需将事件附加到每个单元格，您可以将事件附加到表，并检查目标的类型（见下文）。我在事件侦听器中添加了一个IF，因为单击边框实际上会选择表格。

var gridWidth = 40;
var gridHeight = 40;
var table = document.getElementById('grid');
for (var r = 0; r < gridHeight; r++) {
  var row = document.createElement('tr');
  table.appendChild(row);
  for (var c = 0; c < gridWidth; c++) {
    var td = document.createElement('td');
    row.appendChild(td);
  }
}
table.addEventListener("click", function(e) {
  if (e.target.tagName === 'TD') {
    e.target.classList.toggle('black');
  }
});

table,
td {
  border: 1px solid #555;
  border-collapse: collapse;
}
td.black {
  background-color: #000;
}

<table id="grid"></table>