JavaScript生成的按钮如何添加功能？

Question

我在 HTML 中有一个 table 显示有关产品的数据。嗯，在这个 table 我想添加一个按钮，允许用户删除那个产品，如果他愿意的话，那个按钮将与 table 到 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>

没有信息的table应该是这样的：

在 JavaScript 中，我有一个函数可以与此 table 一起使用，一个用于添加空行，另一个用于添加信息，包括删除按钮。

// 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>";

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

我该怎么做？ Link 我使用 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)

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

Answer 2

这可能是您要查找的内容：

// 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/。

JavaScript生成的按钮如何添加功能？

How to add a function to the button generated by JavaScript?

html

javascript

function

button