如果表格是动态生成的，如何在点击时更改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); }; }; }; 

I can't for the life of me figure out how to add a onClick event that would change the color of a cell. Do I create a new function in JavaScript and add an onClick event to the table element? That's what I did, but it doesn't seem to work.

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

Should do the trick. Every cell gets an onclick handler set in the for loop. Bind passes the reference of the cell to the changeColor function. The function can address the cell by using this .

Answer 2

For some situations, the answer suggested by Mouser work well. But if consider a situation taking your example of table creation based on number of rows and columns, then adding eventlistener to each cell doesn't sound a good approach. Suppose at initial user requested for 10X10 table. At that moment, eventlistener is added to each cell.

But what if at some later point of time, more rows/columns are added dynamically. In that situation, only thing you will left with is to add event listeners.

Better approach is to understand the term

Event Delegation

In this approach, you add event listener to parent and just listen to event bubbled up(default behavior) by the child elements.In that case you dont have to be worry about dynamically created cells and adding event listeners to those.

You can take a look on working sample with Event Delegation approach on your code at below link:

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();

I hope Mouser will agree on this. Thanks!

Answer 3

Inside the for you can add the onclick event for each cell:

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

Then the changeColor will be as following:

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

}