Javascript- 将点击事件添加到动态生成的表格单元格中

Javascript- Adding click event to dynamically generated cell of table

本文关键字：表格 单元格 动态 事件 添加 Javascript-      更新时间：2023-09-26

addEventListener()不起作用？

var mytable = document.getElementById('GridTable');
for (var r = 0; r <rows; r++) 
{
    var row = mytable.insertRow(r);
    for (var c = 0; c <cols; c++)
    {
        var cell=row.insertCell(c);
        cell.id='td'+nn;
        //alert(cell.id);
        cell.innerHTML='&nbsp';
        cell.className="dynamic";
        cell.addEventListener("click", function() {bcolor1('red',cell.id);});
        nn++;
    }
}

您需要使用事件委派来实现此目的。

使用 Javascript ，您可以这样做：

document.querySelector('element').addEventListener('click', function(event) {      
    // on click action here..
});

使用 jQuery ，您可以这样做：

$(document).on("click", "element", function(){
  // on click action here..
});

了解更多：了解事件委派 | jQuery

您可以使用on()函数来实现事件委派。

这样，您就可以选择每个动态添加的元素，并具有类.dynamic 

$(document).on('click', '.dynamic', function() {
    var that = $(this);
    that.css({'background-color': 'red'});
    // do your stuff here ..
});

我得到了以下解决方案，它工作正常.

 var mytable = document.getElementById('GridTable');
 for (var r = 0; r <trow; r++) 
    {
        temp=noc;
        var row = mytable.insertRow(r);
        for (var c = 0; c <tcol; c++)
        {
            cell=row.insertCell(c);
            cell.id='td'+temp;
            cell.style.width =cwidth;
            cell.style.height =cheight;
            //alert(cell.id);
            //cell.innerHTML='&nbsp;';
            cell.className="dynamic";
            with ({ n: cell.id }) 
            {
                cell.onclick = function()
                {
                        bcolor1('red',n);
                };
                cell.onmousemove=function()
                {
                    bcolor('red',n);
                }   
            }                                                         
            temp++;
        }
        noc=noc-tcol;
    }
相关文章：