将javascript板数组转换为html TictaToe板

我正在做一个Tictatcoe游戏。它不是传统的只有3x3的电路板，而是无限大的

我正在尝试转换如下所示的电路板阵列：

[[0,0,0]，[0,0,0]，[0,0,0]]

进入html板。基本上，数组的每个“0”都是一个平铺

toBoard([[0,0,0],[0,0,0],[0,0,0]])
function toBoard(arr) {
  var newBoard = document.createElement("table");
  for (var a = 0; a < arr.length; a++) {
    var row = document.createElement("tr");
    for (var b = 0; b < arr[a].length; b++) {
      var tile = document.createElement('th')
      var sqr = document.createElement("img");
      sqr.src = "client/emptySquare.svg";
      sqr.id = `${a} ${b}`;
      sqr.onclick = () => tileClickHandler(sqr.id);
      tile.appendChild(sqr);
      row.appendChild(tile)
    }
    newBoard.appendChild(row)
  }
  return newBoard;
}

toBoard（[[0,0,0]，[0,0,0]，[0,0,0]）
功能板（arr）{
var newBoard=document.createElement（“表”）；
对于（变量a=0；atileClickHandler（sqr.id）；
瓦片。附属物（sqr）；
行。追加子项（平铺）
}
新板。附加子级（世界其他地区）
}
返回新板；
}

我试着使用一个表格，表格的每个单元格都有一个图像元素（它们有一个onclick函数，这样游戏就知道玩家点击了表格的哪个部分），但它不起作用

该表如下所示：

---

正如你所看到的，电路板的间距很难看。我试图将边框间距设置为0px，但仍然不起作用。如何解决这个问题？或者有没有比表格和图像更好、更有效的方法？

这与JavaScript无关，您应该能够完全用CSS解决它。无论是使用HTML还是JavaScript创建表，表的呈现方式都是相同的。您需要使用

let

而不是

var

来删除

sqr

。否则，它的作用域是函数，所有的

onclick

函数将使用相同的

sqr.id

.tableCss>*>*>td{border:solid yellowgreen；宽度：20px；高度：20px；边框折叠：collapse；}.tableCss{border collapse:collapse；}使用表格上的border collapse属性我们可以看到你的CSS吗？你也可以使用CSS网格，只需将间距设置为0。我刚刚再次检查了它。是的，这可以用CSS完全解决