Finding cell value of dynamically generated table row

Question

I am trying to delete an array record based on what table row is clicked.

This function adds a button to a row and appends it to the end of the table

function addButtons(table, tr){
    var delBtn = document.createElement("button");
    delBtn.innerHTML = "×"
    delBtn.onclick = deleteBu(tr)
    tr.appendChild(delBtn);
    table.children[1].appendChild(tr)
}

The function below is meant to delete an array record based on the row clicked. For example, in row 1, the first cell is "45" . Based on this, the record is deleted if it is found in the array storageProblem.

Here is what I have so far. The issue is because I am using tr as the action listener, so simply clicking on the row will delete the row, it is not localized to the button. But using tr is the only way I have found to get the first td of a row.

function deleteBu(tr){
    $(tr).click(function(){ 
        var value=$(this).find('td:first').html();
        for(i = 0; i < storageProblem.length; i++){
            if(value == storageProblem[i][0]){
                storageProblem.splice(i, 14)
                loadCallProblemTable()
            }
        }
    })
}

Answer 1

I'm not sure if I've understood your question right but maybe try this solution:

function deleteBu(x) {
    var Index = $(x).closest('tr').index();
    console.log("Row index: " + Index);
}