为动态表行创建onclick事件的Javascript

Javascript creating an onclick event for a dynamic table row

本文关键字：事件 Javascript onclick 创建 动态      更新时间：2023-09-26

我在将onclick事件附加到动态表行时遇到问题。

我有什么在这里：

function parseOrderLine(data) {
    var obj = JSON.parse(data);
    if (obj.length > 0) {
        var tbl = document.createElement('table');
        var row = tbl.insertRow(0);
        var cell = row.insertCell(0);
        cell.innerHTML = "Code";
        cell = row.insertCell(1);
        cell.innerHTML = "Size";
        cell = row.insertCell(2);
        cell.innerHTML = "Description";
        cell = row.insertCell(3);
        cell.innerHTML = "Type";
        cell = row.insertCell(4);
        cell.innerHTML = "Price";
        cell.style.textAlign = "right";
        for (var i = 0; i < obj.length; i++) {
            row = tbl.insertRow(i + 1);
            row.className = "results_row";
            cell = row.insertCell(0);
            cell.innerHTML = obj[i].Code;
            cell = row.insertCell(1);
            cell.innerHTML = obj[i].Size;
            cell = row.insertCell(2);
            cell.innerHTML = obj[i].Description;
            cell = row.insertCell(3);
            cell.innerHTML = obj[i].Type;
            cell = row.insertCell(4);
            cell.innerHTML = parseFloat(obj[i].Price).toFixed(2);
            cell.style.textAlign = "right";
            //row.addEventListener("click", function(){ alert('listen'); });
            row.onclick = (function(){ alert('click'); });
        }
        return tbl.outerHTML;
    }
    else { ...

正如您所看到的，我已经尝试了设置onclick事件和添加监听器。两者似乎都不起作用。

我希望有人能告诉我，我只是疯了，忽略了一些显而易见的事情；0）

任何帮助都感谢大家。

感谢阅读。

Jas

您的问题出在tbl.outerHTML上。

当您使用addEventListener添加事件侦听器时，Javascript不会将该方法添加到onclick属性中的HTML代码中，而是仅添加到DOM中。因此，当您使用tbl.outerHTML时，侦听器不会添加到返回的HTML代码中。同样适用于row.onclick = function()...

如果您想在使用outerHTML时保留事件侦听器，我建议您使用setAttribute:

function createTable()
{
        var obj = [1,2,3,4,5];
        var tbl = document.createElement('table');
        var row = tbl.insertRow(0);
        var cell = row.insertCell(0);
        cell.innerHTML = "Code";
        cell = row.insertCell(1);
        cell.innerHTML = "Size";
        cell = row.insertCell(2);
        cell.innerHTML = "Description";
        cell = row.insertCell(3);
        cell.innerHTML = "Type";
        cell = row.insertCell(4);
        cell.innerHTML = "Price";
        cell.style.textAlign = "right";
        for (var i = 0; i < obj.length; i++) {
            row = tbl.insertRow(i + 1);
            row.className = "results_row";
            cell = row.insertCell(0);
            cell.innerHTML = obj[i].Code;
            cell = row.insertCell(1);
            cell.innerHTML = obj[i].Size;
            cell = row.insertCell(2);
            cell.innerHTML = obj[i].Description;
            cell = row.insertCell(3);
            cell.innerHTML = obj[i].Type;
            cell = row.insertCell(4);
            cell.innerHTML = parseFloat(obj[i].Price).toFixed(2);
            cell.style.textAlign = "right";
            //row.addEventListener("click", function(){ alert('listen'); });
            row.setAttribute('onclick', "(function(){ alert('click'); })()");
        }
        return tbl.outerHTML;
}
document.getElementById('test').innerHTML = createTable();
<div id="test"></div>

尽管这不是最好的解决方案，但当您想要实际使用刚刚创建的对象（在您的情况下，是表）时，不应该使用outerHTML。您应该使用appendChild方法将其添加到DOM中，这样就可以使用addEventListener:

function createTable()
{
        var obj = [1,2,3,4,5];
        var tbl = document.createElement('table');
        var row = tbl.insertRow(0);
        var cell = row.insertCell(0);
        cell.innerHTML = "Code";
        cell = row.insertCell(1);
        cell.innerHTML = "Size";
        cell = row.insertCell(2);
        cell.innerHTML = "Description";
        cell = row.insertCell(3);
        cell.innerHTML = "Type";
        cell = row.insertCell(4);
        cell.innerHTML = "Price";
        cell.style.textAlign = "right";
        for (var i = 0; i < obj.length; i++) {
            row = tbl.insertRow(i + 1);
            row.className = "results_row";
            cell = row.insertCell(0);
            cell.innerHTML = obj[i].Code;
            cell = row.insertCell(1);
            cell.innerHTML = obj[i].Size;
            cell = row.insertCell(2);
            cell.innerHTML = obj[i].Description;
            cell = row.insertCell(3);
            cell.innerHTML = obj[i].Type;
            cell = row.insertCell(4);
            cell.innerHTML = parseFloat(obj[i].Price).toFixed(2);
            cell.style.textAlign = "right";
            row.addEventListener("click", (function(){ alert('click'); }));
        }
        return tbl;
}
document.getElementById('test').appendChild(createTable());
<div id="test"></div>

相关文章：