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

How do I change an html cell's color on click, if the table is generated dynamically?

本文关键字：单击 颜色 单元格 html 动态 表格 如果      更新时间：2023-09-26

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";
        }

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 处理程序。绑定将单元格的引用传递给changeColor函数。该函数可以使用this对单元格进行寻址。

在某些情况下，Mouser建议的答案效果很好。但是，如果考虑以基于行数和列数创建表为例的情况，那么向每个单元格添加事件侦听器听起来不是一个好方法。假设在初始用户请求 10X10 表时。那一刻，事件侦听器将添加到每个单元格。

但是，如果在以后的某个时间点，动态添加更多行/列怎么办。在这种情况下，您唯一要做的就是添加事件侦听器。

更好的方法是理解该术语

事件委派

在此方法中，您将事件侦听器添加到父元素，并仅侦听子元素冒泡的事件（默认行为）。在这种情况下，您不必担心动态创建的单元格并向其中添加事件侦听器。

您可以在以下链接中查看代码中使用事件委派方法的工作示例：

http://jsfiddle.net/zL690Ljb/1/

function drawTable() {
 var table = document.getElementById("myTable");
 table.addEventListener("click", changeColor);
 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);
  //cell.addEventListener("click", changeColor.bind(cell), false);
};
};
};
function changeColor(event) {
    if (event.target && event.target.tagName && (!event.target.tagName.match(/table|th|tr|tbody|thead/i)) )
    {
      var element = event.target;
      while (element && element.parentElement)
      {
          if(element.tagName=='TD'){
               element.style.backgroundColor = "red";
               break;
          }
          else
          {
             element = element.parentElement;
          }
      }
    }
}
drawTable();

我希望贸泽能同意这一点。谢谢！

在 for 中，您可以为每个单元格添加 onclick 事件：

for (var i = 0; i < a; i++) {
    var row = table.insertRow(i);
    for (var j = 0; j < b; j++) {
      var cell = row.insertCell(j);
      cell.onclick = function(){
        changeColor(this);  
      }
    };
};

然后更改颜色将如下所示：

function changeColor(cell) {
    cell.style.backgroundColor = "red";
}
相关文章：