如何向JavaScript生成的按钮添加函数？

我有一个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>

卷
序列号
处境
删除

没有信息的表格应如下所示：

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

在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>";
        }
    }
};

//向表中添加行的函数
$scope.insertLines=函数（）{
var tableS=document.getElementById（“tableVolume”）；
var numorrowss=tableS.rows.length；
var numofolss=tableS.rows[numOfRowsS-1].cells.length；
var newRowS=tableS.insertRow（numrowss）；
对于（var k=0；k

代码的其余部分无关紧要，甚至有变量和函数的名称，我没有给出细节。对我来说重要的是线路

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=“”；

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

---

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

指定为html属性的事件处理程序将在全局范围内查找JavaScript标识符。因此，在您当前的场景中，如果全局声明了

DeleteSrlNumber（）

，那么实际上应该在单击时调用它

如果要访问非全局标识符，则可以执行以下操作：

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

---

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

指定为html属性的事件处理程序将在全局作用域中查找javascript标识符。因此，在您当前的场景中，如果全局声明了

DeleteSrlNumber（）

，那么实际上应该在单击时调用它

如果要访问非全局标识符，则可以执行以下操作：

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

---

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

这可能就是您要查找的：

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

//插入按钮
tableVolume.rows[number+k+1]。单元格[3]。innerHTML=
"";
//获取对button元素的引用（它是此单元格的第一个元素）
tableVolume.rows[number+k+1]。单元格[3]。firstElementChild
//并指定一个删除该行的单击侦听器（但它可以执行任何您想要的操作）
.addEventListener（“单击”，函数（）{
tableVolume.rows[number+k+1].remove（）；
})

---

我还在这里做了一个现场演示。

这可能就是您想要的：

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

//插入按钮
tableVolume.rows[number+k+1]。单元格[3]。innerHTML=
"";
//获取对button元素的引用（它是此单元格的第一个元素）
tableVolume.rows[number+k+1]。单元格[3]。firstElementChild
//并指定一个删除该行的单击侦听器（但它可以执行任何您想要的操作）
.addEventListener（“单击”，函数（）{
tableVolume.rows[number+k+1].remove（）；
})

---

我还在这里做了一个现场演示。

没错，谢谢！对，谢谢！