如何为 JavaScript 生成的按钮添加函数？答案

【问题标题】：How to add a function to the button generated by JavaScript?如何为 JavaScript 生成的按钮添加函数？
【发布时间】：2021-04-23 14:04:32
【问题描述】：

我有一个显示产品数据的 HTML 表格。好吧，在这个表格中我想添加一个按钮，允许用户根据需要删除该产品，该按钮将通过 JavaScript 与表格中的信息一起自动生成。

<!-- This is my table in HTML -->
<table id="tableVolume" border="1">
    <thead>
        <tr>
            <th>  Volume  </th>
            <th>  Serial Number  </th>
            <th>  Situation  </th>
            <th>  Delete  </th>
        </tr>
    </thead>
<tbody>
</tbody>
</table>

没有信息的表格应该是这样的：

在 JavaScript 中，我有一个函数可以处理这个表，一个用于添加空行，另一个用于添加信息，包括删除按钮。

// Function to add lines to a table
$scope.insertLines = function () {
    
    var tableS = document.getElementById("tableVolume");
    var numOfRowsS = tableS.rows.length;
    var numOfColsS = tableS.rows[numOfRowsS-1].cells.length;
    var newRowS = tableS.insertRow(numOfRowsS);

    for (var k = 0; k < numOfColsS; k++)
    {
        newCell = newRowS.insertCell(k);
        newCell.innerHTML = '&nbsp;';
    }
};

//Function to add informations to a table
$scope.infosnaTabelaSecun = function(number) {
    if (FindCodigo != null && matchTraco == null) {
        for (var k = 0; k < $scope.FindSerialNumber.length; k++) {
            tableVolume.rows[number+k+1].cells[0].innerHTML = volTotal;
            tableVolume.rows[number+k+1].cells[1].innerHTML = lines[(5+k)].substring(4); 
            tableVolume.rows[number+k+1].cells[2].innerHTML = "";
            tableVolume.rows[number+k+1].cells[3].innerHTML = "<button class='button-one' onclick='DeleteSrlNumber()'> <i class='fas fa-trash-alt'></i></button>";
        }
    }
    else if (matchTraco != null) {
        for (var k = 0; k < (lines.length - $scope.pularLnhs); k++) {
            tableVolume.rows[number+k+1].cells[0].innerHTML = volTotal;
            tableVolume.rows[number+k+1].cells[1].innerHTML = lines[($scope.pularLnhs+k)].substring(4);  
            tableVolume.rows[number+k+1].cells[2].innerHTML = "";
            tableVolume.rows[number+k+1].cells[3].innerHTML = "<button class='button-one' onclick='DeleteSrlNumber()'> <i class='fas fa-trash-alt'></i></button>";
        }
    }
};

其余的代码无关紧要，以至于有变量和函数的名称我没有提供详细信息。对我来说重要的是线

tableVolume.rows[number+k+1].cells[3].innerHTML = "<button class='button-one' onclick='DeleteSrlNumber()'> <i class='fas fa-trash-alt'></i></button>";

我在表格中的每一行自动添加一个按钮。好吧，我可以添加按钮，但我不能将该按钮连接到函数，例如，当单击按钮时，它将删除它所在的行。

我该怎么做？将函数链接到我使用 JavaScript 创建的此按钮？

【问题讨论】：

标签： javascript html function button

【解决方案1】：

这可能就是你要找的：

// Insert the button
tableVolume.rows[number+k+1].cells[3].innerHTML = 
    "<button class='button-one'><i class='fas fa-trash-alt'></i></button>";

// Get a reference to the button element (it's the first element of this cell) 
tableVolume.rows[number+k+1].cells[3].firstElementChild
// And assign a click listener that removes this row (but it can do whatever you want)
    .addEventListener("click", function() { 
        tableVolume.rows[number+k+1].remove();
    })

我还在这里https://jsfiddle.net/ecmoqtbf/14/做了一个现场演示。

【讨论】：

【解决方案2】：

指定为 html 属性的事件处理程序将在全局范围内查找 javascript 标识符。因此，在您目前的情况下，如果 DeleteSrlNumber() 是全局声明的，则实际上应该在单击时调用它。

如果你想访问非全局标识符，那么你可以这样做：

var button = document.createElement("button")
button.addEventListener("click", function() { 
   DeleteSrlNumber()
})
tableVolume.rows[number+k+1].cells[3].appendChild(button)

请注意，在这种情况下，标识符即使是非全局的，也应该在范围内。

【讨论】：