Reputation: 333

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

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

Upvotes: 2

Answers (3)

gaetanoM

Reputation: 42054

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>

Upvotes: 7

ceid-vg

Reputation: 333

The answer from @gaetanoM will be the accepted one. If anyone wants a way not only to get only the id, but full row data, you may try this:

HTML CODE:

Change this:

<td>1</td>
<td>John</td>
<td>John</td>
<td>[email protected]</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>

to this:

<td class="table_id">23</td>
<td class="table_firstName">John</td>
<td class="table_lastName">John</td>
<td class="table_email">[email protected]</td>
<td class="table_born">1976</td>
<td class="table_country">USA</td>
<td class="table_departmentId">Michigan</td>

JAVASCRIPT CODE:

Change this:

$('#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());
})

to this:

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
    var id = $(this).closest('tr').find('.table_id').text();
    console.log("Id = " + id);
    var firstname = $(this).closest('tr').find('.table_firstName').text();
    console.log("First Name = " + firstname);
    var lastname = $(this).closest('tr').find('.table_lastName').text();
    console.log("Last Name = " + lastname);
    var email = $(this).closest('tr').find('.table_email').text();
    console.log("Email = " + email);
    var born = $(this).closest('tr').find('.table_born').text();
    console.log("Born = " + born);
    var country = $(this).closest('tr').find('.table_country').text();
    console.log("Country = " + country);
    var department = $(this).closest('tr').find('.table_departmentId').text();
    console.log("Department = " + department);
})

See the results in THIS fiddle.

Thanks again to everyone who contributed in finding an answer!!!

Upvotes: 1

AkeRyuu

Reputation: 91

To to retrieve data in row after pressing button Update

<button type="button" class="btn btn-warning" onclick="getData(this)">

window.getData = function(val) {
  let arr= [];

  val.parentNode.parentNode.querySelectorAll('td').forEach(item=>{
    if (item.getAttribute('class') != "text-center") {
      arr.push(item.innerHTML)
    }
  },this)
  console.log(arr); //["1", "John", "John", "[email protected]", "1976", "USA", "Michigan"]
}

Upvotes: 1

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

Answers (3)

Related Questions