Fetch the row from html table on button click

Question

So, I have a table with update button, and I want to be able to fetch a column from the row button was clicked on.

Below is the html code for table

<table class="table table-hover" style="width: 99%">
        <thead class="thead-dark" align="center">
            <tr>
                <th>ID</th>
                <th>Trainee Class</th>
                <th>Start Date</th>
                <th>Edit</th>
                <th>Trainees</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td class="nr">J001</td>
                <td>Java Stream</td>
                <td>01-April-2018</td>
                <td><button onclick="updateData()">Update</button>
                    <button>Remove</button></td>
                <td><button>View</button></td>
            </tr>
 <table>

So, when I click update, i want to fetch "J001" (first column of the update button row).

I tried below, but it's not fetching.

function updateData(){
     var $item = $(this).closest("tr")   
                 .find(".nr")    
                 .text();        

     alert($item);      
}

Any help or suggestion will be appreciated.

Jeswin Rebil · Accepted Answer · 2018-10-19 18:37:17Z

2

You have to pass this in your update function call,

Your Html should be,

<table class="table table-hover" style="width: 99%">
        <thead class="thead-dark" align="center">
            <tr>
                <th>ID</th>
                <th>Trainee Class</th>
                <th>Start Date</th>
                <th>Edit</th>
                <th>Trainees</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td class="nr">J001</td>
                <td>Java Stream</td>
                <td>01-April-2018</td>
                <td><button onclick="updateData(this)">Update</button>
                    <button>Remove</button></td>
                <td><button>View</button></td>
            </tr>
 <table>

Jquery function should be,

function updateData(e){
     var $item = $(e).closest("tr")   
                 .find("td:first")    
                 .text(); 
     alert($item);      
}

answered Oct 19, 2018 at 18:37

Jeswin Rebil

4601 gold badge7 silver badges19 bronze badges

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

1 Comment

Billy Over a year ago

This is perfect. Thanks @JeswinRebil

Collectives™ on Stack Overflow

Fetch the row from html table on button click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related