单击Javascript时返回单元格的Id

我正在创建一个单元格表，当单击每个单元格时，这些单元格将改变颜色

我已经创建了表，并且具有“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();

const grid=函数makeGrid（）{
var body=document.getElementById（'pixelCanvas'）；
var tbl=document.createElement（'table'）；
var tblBody=document.createElement（'tbody'）；
for（设i=0；i<5；i++）{
让row=document.createElement（'tr'）；
对于（j=0；j<5；j++）{
var cell=document.createElement（'td'）
行。追加子项（单元格）
cell.setAttribute（'id'，'makeId'+i+j）；
}
tblBody.appendChild（世界其他地区）；
}
tbl.附肢儿童（tblBody）；
附体子体（tbl）
} 
网格（）；

您需要将单击事件绑定到已创建的

单元格

编辑：使用事件委派

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

const grid=函数makeGrid（）{
var body=document.getElementById（'pixelCanvas'）；
var tbl=document.createElement（'表'）
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（设i=0；i<5；i++）{
让行=document.createElement（'tr'）
for（设j=0；j<5；j++）{
var cell=document.createElement（'td'）
cell.innerHTML='makeId'+i+j；
行。追加子项（单元格）
cell.setAttribute（'id'，'makeId'+i+j）；
}
tblBody.appendChild（世界其他地区）；
}
tbl.附肢儿童（tblBody）；
附体子体（tbl）
}
网格（）
.bg{
背景颜色：浅绿色；
}
您需要将单击事件绑定到已创建的
单元格

编辑：使用事件委派

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


const grid=函数makeGrid（）{
var body=document.getElementById（'pixelCanvas'）；
var tbl=document.createElement（'表'）
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（设i=0；i<5；i++）{
让行=document.createElement（'tr'）
for（设j=0；j<5；j++）{
var cell=document.createElement（'td'）
cell.innerHTML='makeId'+i+j；
行。追加子项（单元格）
cell.setAttribute（'id'，'makeId'+i+j）；
}
tblBody.appendChild（世界其他地区）；
}
tbl.附肢儿童（tblBody）；
附体子体（tbl）
}
网格（）
.bg{
背景颜色：浅绿色；
}
使用事件委派，而不是在每个
td
元素上设置事件侦听器

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

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

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

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

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

正如Randy所建议的，您可以使用事件委派并将侦听器放在适当的祖先上，即父表部分（tbody、thead、tfoot）或表本身，而不是将侦听器放在每个TD上。然后使用传递给侦听器的事件对象获取事件的目标。如果不是TD，则向上移动父节点，直到到达TD

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

此外，您还可以利用table和table section元素的insertRow和insertCell方法，而不是冗长的createElement。最后，您可以一次创建元素和附加元素

无论如何，像这样：



//创建包含行和单元格列的表
函数genTable（行、单元格）{
var table=document.createElement（'table'）；
//一次性创建tbody和append
var tbody=table.appendChild（document.createElement（'tbody'）；
tbody.addEventListener（'click'，highlightCell）；
var行、单元格；
//使用insert方法可以减少代码量
对于（vari=0；i，正如Randy所建议的，而不是在每个TD上放置一个侦听器，您可以使用事件委派，并将侦听器放置在一个合适的祖先上，或者是一个父表部分（tbody、thead、tfoot）或者表本身。然后使用传递给侦听器的事件对象获取事件的目标。如果它不是TD，则向上移动父节点，直到到达TD

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

此外，您还可以利用table和table section元素的insertRow和insertCell方法，而不是冗长的createElement。最后，您可以一次创建元素和追加元素

无论如何，像这样：



//创建包含行和单元格列的表
函数genTable（行、单元格）{
var table=document.createElement（'table'）；
//一次性创建tbody和append
var tbody=table.appendChild（document.createElement（'tbody'）；
tbody.addEventListener（'click'，highlightCell）；
var行、单元格；
//使用insert方法可以减少代码量
对于（var i=0；此项的可能重复项的可能重复项将
click
事件绑定到
tbody
元素中的每个元素。不，不会。请解释您看到的内容。是的，它将仅绑定到
tbody