0

这个想法是有一个网格并在您单击它们时更改任何单元格的颜色。我的解决方案是制作一张桌子：

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>

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

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

4

2 回答 2

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;
}
于 2018-12-26T09:14:47.947 回答
0

您的请求比您所要求的要复杂一些。想象一个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>

于 2018-12-26T09:20:59.133 回答