如果表格是動態生成的，如何在點擊時更改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尋址單元格。

Answer 2

在某些情況下， 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();

我希望Mouser對此表示同意。 謝謝！

Answer 3

在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);  
      }
    };
};

然后changeColor將如下所示：

function changeColor(cell) {
    cell.style.backgroundColor = "red";

}