单击Javascript时返回单元格的ID

Question

我正在创建一个单元格表格，当单击每个单元格时，该表格会改变颜色。

我已经创建了表格，并为“td”元素提供了唯一的 ID - 如何返回被点击的单元格的 ID 以便我可以更改其背景颜色？

用纯JS可以做到这一点吗？

const grid = function makeGrid() {
    var body = document.getElementById('pixelCanvas');
    var tbl = document.createElement('table');
    var tblBody = document.createElement('tbody');

    for (let i = 0; i < 5; i++) {
        let row = document.createElement('tr');
        for (j = 0; j < 5; j++) {
            var cell = document.createElement('td')
            row.appendChild(cell)
            cell.setAttribute('id', 'makeId' + i + j);
        }
        tblBody.appendChild(row);
    }
    tbl.appendChild(tblBody);
    body.appendChild(tbl)
} 
grid();

Answer 1

不要在每个td 元素上设置事件侦听器，而是使用事件委托。

在表体上设置监听器。它将听到对td 元素的点击。使用事件对象的target 属性来确定单击了哪个td。这就是变化：

document.querySelector('tbody').addEventListener('click', (e)=>{
      e.target.style.backgroundColor = 'pink';
}

Answer 2

需要将点击事件绑定到创建的cell

已编辑：使用事件委托

tblBody.addEventListener('click', (e)=>{
    if (e.target.nodeName.toUpperCase() === 'TD') {
       console.log(e.target.id)
       e.target.classList.add('bg');
    }
});

const grid = function makeGrid() {

  var body = document.getElementById('pixelCanvas');

  var tbl = document.createElement('table')
  var tblBody = document.createElement('tbody')

  tblBody.addEventListener('click', (e)=>{
      if (e.target.nodeName.toUpperCase() === 'TD') {
         console.log(e.target.id)
         e.target.classList.add('bg');
      }
  });

  for (let i = 0; i < 5; i++) {
    let row = document.createElement('tr')

    for (let j = 0; j < 5; j++) {
      var cell = document.createElement('td')
      cell.innerHTML = 'makeId' + i + j;
      row.appendChild(cell)
      cell.setAttribute('id', 'makeId' + i + j);
    }
    tblBody.appendChild(row);
  }
  tbl.appendChild(tblBody);
  body.appendChild(tbl)
}
grid();

.bg {
  background-color: lightgreen;
}

<div id="pixelCanvas">
</div>

Answer 3

正如 Randy 所建议的，您可以使用事件委托并将侦听器放在合适的祖先上，而不是在每个 TD 上放置一个监听器，或者是父表部分（tbody、thead、tfoot）或表本身。然后使用传递给监听器的事件对象来获取事件的目标。如果不是 TD，就往上走父节点，直到到达 TD。

现在大多数浏览器都实现了Element.closest，但IE没有。因此，您可能希望为这些用户使用 polyfill 或简单的“upTo”函数。

此外，您可以利用表格和表格部分元素的 insertRow 和 insertCell 方法，而不是更冗长的 createElement。最后，您可以将创建元素和添加元素结合在一起。

总之，像这样：

 
// Create a table with rows rows and cells columns
function genTable(rows, cells) {
  var table = document.createElement('table');
  // Create tbody and append in one go
  var tbody = table.appendChild(document.createElement('tbody'));
  tbody.addEventListener('click',highlightCell);
  var row, cell;

  // Use insert methods for less code
  for (var i=0; i<rows; i++) {
    row = tbody.insertRow();

  for (var j=0; j<cells; j++) {
      cell = row.insertCell();
      cell.textContent = 'row ' + i + ' cell ' + j;
    }
  }
  // Add entire table to document in one go, easier on host
  document.body.appendChild(table);
}

// Highlight cell that was clicked on
function highlightCell(e){
  // Remove highlight from all cells that have it
  document.querySelectorAll('.highlight').forEach(
    node => node.classList.remove('highlight')
  );
  // Add highlight to cell of td in which event occurred
  var cell = e.target.closest('td');
  cell.classList.add('highlight');
}

window.onload = function(){genTable(3, 3);};

table {
  border-collapse: collapse;
  border-left: 1px solid #bbbbbb;
  border-top: 1px solid #bbbbbb;
}
td {
  border-right: 1px solid #bbbbbb;
  border-bottom: 1px solid #bbbbbb;
}
.highlight {
  background-color: red;
}