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>

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

P.S。在此网站上-> 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>

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

2 个答案: