javascript - 如果表格是动态生成的，如何在点击时更改 html 单元格的颜色？

Question

function drawTable() {

  var table = document.getElementById("myTable");

  var input = prompt("Insert height (in number of cells)");
  var a = +input;
  var input2 = prompt("Insert width (in number of cells)");
  var b = +input2;

  for (var i = 0; i < a; i++) {
    var row = table.insertRow(i);
    for (var j = 0; j < b; j++) {

      var cell = row.insertCell(j);
    };
  };
};

我一生都无法弄清楚如何添加一个可以改变单元格颜色的 onClick 事件。我是否需要在 JavaScript 中创建一个新函数并向表格元素添加 onClick 事件？这就是我所做的，但它似乎不起作用。

		function changeColor() {
		    var td = document.getElementsById("myTable").getElementsByTagName("td");
		    td.style.backgroundColor = "red";
        }

Answer 1

for (var j = 0; j < b; j++) {

  var cell = row.insertCell(j);
  cell.addEventListener("click", changeColor.bind(cell), false);
};

function changeColor(e) {
      this.style.backgroundColor = "red";
}

应该可以解决问题。每个单元格都会在 for 循环中设置一个 onclick 处理程序。 Bind 将单元格的引用传递给 changeColor 函数。该函数可以使用 this 对单元格进行寻址。