Question

我试图在javascript中制作一个记忆游戏，但是我在创建棋盘时遇到了问题+在表格数据中添加了一个事件处理程序（点击）。下面是代码片段：

 var board = document.getElementById("board");
 var img = document.createElement("img");
 var NUM_ROWS = 6;
 var NUM_COLS = 6;
 for (row = 0; row < NUM_ROWS; row++) {
    var tr = document.createElement("tr");
    for (col = 0; col < NUM_COLS; col++) {
        var td = document.createElement("td");
        var img = document.createElement("img");
        tr.appendChild(td);
        img.src = 'images/image0.png';
        tr.appendChild(img);
    }
    board.appendChild(tr);
 }

Answer 1

有很多方法可以做到这一点。为您提供大量灵活性的一种方法是构建具有您需要的所有功能的图像元素的字符串版本，并通过设置td.innerHTML将其插入表格单元格中，如下所示：

function myclick(row,col) {
  // handle the click here
}

var board = document.getElementById("board");
var NUM_ROWS = 6;
var NUM_COLS = 6;
for (var row = 0; row < NUM_ROWS; row++) {
  var tr = document.createElement("tr");
  for (col = 0; col < NUM_COLS; col++) {
    var td = document.createElement("td");
    var src = "images/image0.png";
    var img = '<img src="'+src+'" onclick="myclick('+row+','+col+');">';
    td.innerHTML = img;
    tr.appendChild(td);
  }
  board.appendChild(tr);
}

在这种情况下，使用内置的onclick函数创建img元素，并将点击的行和列提供给您的点击处理函数。

记忆游戏板创建，javascript

1 个答案: