HTML - Get row Id by pressing a Button inside same row

Question

Supposing I have an HTML Table and each row has Some data, an Update and a Delete Button. I want, by clicking on the Update Button, to retrieve every data THIS SPECIFIC ROW has. I have searched for other examples but they most of them just traversed through a column by using a column id and just printed every cell data they found. I need, upon pressing the update Button, to retrieve all the current cell data this row has. How can I do that?

JS Fiddle HERE

Could not properly indent code after trying for more than 30mins so I gave up

Answer 1

You can change your html button from:

<button type="button" class="btn btn-danger" onclick="getConfirmation();">Delete</button>

to:

<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                                                                      ^^^^

Adding the this keyword to the function you are passing the current button. Now, in order to get the corresponding row it's enough you use jQuery.closest():

var row = $(ele).closest('tr');

or with plain js .closest()

var row = ele.closest('tr');

For the update buttons you can add the click handler:

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {

or with plain js .querySelectorAll():

document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach.....

The jQuery snippet:

window.getConfirmation = function(ele){
    var retVal = confirm("Are you sure you want to delete ?");
    if( retVal == true ){
        alert("User wants to delete!");
        var row = $(ele).closest('tr');
        row.remove();
        return true;
    }
    else{
        alert ("User does not want to delete!");
        return false;
    }
}

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
    var row = $(this).closest('tr');
    console.log('TR first cell: ' + row.find('td:first').text());
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <h2>Employees</h2>
    <table id="employees-table" class="table table-hover table-responsive">
        <thead>
        <tr>
            <th>Id</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Born</th>
            <th>Country</th>
            <th>Department</th>
            <th class="text-center">Update Row</th>
            <th class="text-center">Delete Row</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>John</td>
            <td>[email protected]</td>
            <td>1976</td>
            <td>USA</td>
            <td>Michigan</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mark</td>
            <td>Twain</td>
            <td>[email protected]</td>
            <td>1965</td>
            <td>England</td>
            <td>London</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        </tbody>
    </table>
</div>

As per Hossein Asmand comment (How can I do this using only Javascript?) a full js solution follows:

window.getConfirmation = function(ele){
    var retVal = confirm("Are you sure you want to delete ?");
    if( retVal == true ){
        var row = ele.closest('tr');
        console.log("User wants to delete: " + row.cells[0].textContent);
        row.remove();
        return true;
    }
    else{
        console.log("User does not want to delete!");
        return false;
    }
}

document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach(function(ele, idx) {
    ele.addEventListener('click', function(e) {
        var row = this.closest('tr');
        console.log('TR first cell: ' + row.cells[0].textContent);
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<div class="container">
    <h2>Employees</h2>
    <table id="employees-table" class="table table-hover table-responsive">
        <thead>
        <tr>
            <th>Id</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Born</th>
            <th>Country</th>
            <th>Department</th>
            <th class="text-center">Update Row</th>
            <th class="text-center">Delete Row</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>John</td>
            <td>[email protected]</td>
            <td>1976</td>
            <td>USA</td>
            <td>Michigan</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mark</td>
            <td>Twain</td>
            <td>[email protected]</td>
            <td>1965</td>
            <td>England</td>
            <td>London</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        </tbody>
    </table>
</div>