在动态创建输入元素时为onclick指定一个参数值

Assign a argument value for onclick on dynamic creation of input element

本文关键字：一个 参数 输入 创建 动态 元素 onclick      更新时间：2023-09-26

我有一个JSON对象，我用这些值创建了一个表，并添加了一个删除按钮，如下所示

for (var keyValue in thisAdminResult) {
    if (thisAdminResult.hasOwnProperty(keyValue)) {
        var row = document.createElement('tr');
        var firstColumn = document.createElement('td');
        var secondColumn = document.createElement('td');
        var thirdColumn = document.createElement('td');
        var fourthColumn = document.createElement('td');
        var password = document.createElement('input');
        password.type = "password";
        var removeButton = document.createElement('input');
        removeButton.type = "button";
        var updateButton = document.createElement('input');
        updateButton.type = "button";
        firstColumn.appendChild(document.createTextNode(keyValue));
        password.value = thisAdminResult[keyValue];
        secondColumn.appendChild(password);
        removeButton.value = 'remove';
        removeButton.onclick = function () {
            remove(keyValue);
        }
        thirdColumn.appendChild(removeButton);
        updateButton.value = 'update'
        updateButton.onclick = function () {
            //update(keyValue);
        }
        fourthColumn.appendChild(updateButton);
        row.appendChild(firstColumn);
        row.appendChild(secondColumn);
        row.appendChild(thirdColumn);
        row.appendChild(fourthColumn);
        table.appendChild(row);
    }
}

我需要做的是，当按下每个remove按钮时，用"keyValue"变量的特定值调用remove函数。

但使用上述代码

当我单击任一remove按钮时，它会调用具有相同参数值（"keyValue"的最后一个值）的remove函数。

有人能告诉我该怎么做吗。

您可以使用IIFE返回当前值为keyValue的函数，类似

removeButton.onclick = (function (value) {
    return function(){ 
        remove(value); 
    };
})(keyValue);
相关文章：