Question

我无法将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）

任何帮助赞赏的人。

感谢阅读。

雅

Answer 1

您的问题出在tbl.outerHTML上。

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

如果您想在使用outerHTML时保留事件监听器，建议您使用setAttribute：

＆＃13;

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

＆＃13;

<div id="test"></div>

＆＃13;

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

＆＃13;

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

＆＃13;

<div id="test"></div>

＆＃13;

Javascript为动态表行创建onclick事件

1 个答案: