我有一个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 = ' ';
}
};
//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创建的这个按钮？
指定为html属性的事件处理程序将在全局范围内查找javascript标识符。因此，在当前场景中，如果deletesrlnumber()是全局声明的，那么实际上应该在单击时调用它。
如果您希望访问非全局标识符,那么您可以执行如下操作：
var button = document.createElement("button")
button.addEventListener("click", function() {
DeleteSrlNumber()
})
tableVolume.rows[number+k+1].cells[3].appendChild(button)
请注意，在这种情况下，标识符，即使不是全局的，仍然应该在作用域中。
