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

Question

I have a table in HTML that shows data about products. Well, in this table I want to add a button that allows the user to delete that product if he wishes, that button will be automatically generated together with the information in the table through 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>

The table without information should look like this:

In JavaScript I have a function that will work with this table, one to add blank lines and another to add information, including the delete button.

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

The rest of the code doesn't matter much, so much so that there are names of variables and functions that I didn't give details. What matters to me is the line

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

where I add a button to each row in the table automatically. Well, I can add the button but I can't connect that button to a function, for example, when clicking the button it will delete the line where it is.

How would I do that? Link a function to this button that I created using JavaScript?

Bronislav Růžička · Accepted Answer · 2021-04-23 14:58:40Z

1

This is probably what you're looking for:

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

I've also made a live demo here https://jsfiddle.net/ecmoqtbf/14/.

answered Apr 23, 2021 at 14:58

Bronislav Růžička

2311 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IAmDranged · Accepted Answer · 2021-04-23 15:12:22Z

1

Event handlers specified as html attributes will look for javascript identifiers in the global scope. So in your present scenario, if DeleteSrlNumber() is declared globally, it should actually be called on click.

If you want to access identifiers that are non-global, then you could do something like this:

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

Note in this case that the identifiers, even though non-global, should still be in scope.

edited Apr 23, 2021 at 15:12

answered Apr 23, 2021 at 14:49

IAmDranged

3,0201 gold badge14 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related