如何在JavaScript生成的按钮中添加一个函数？

Question

我有一个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中，我有一个函数可以处理这个表，一个用来添加空行，另一个用来添加信息，包括delete按钮。

// 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创建的这个按钮？

Answer 1

指定为html属性的事件处理程序将在全局范围内查找javascript标识符。因此，在当前场景中，如果deletesrlnumber()是全局声明的，那么实际上应该在单击时调用它。

如果您希望访问非全局标识符,那么您可以执行如下操作：

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

请注意，在这种情况下，标识符，即使不是全局的，仍然应该在作用域中。