Get the contents of a table row with a button click

Question

I need to extract the details of each column in my table. For example, column "Name/Nr.".

• The table contains a number of addresses
• The very last column of each row has a button that lets a user choose a listed address.

Problem: My code only picks up the first <td> that has a class nr. How do I get this to work?

Here's the jQuery bit:

$(".use-address").click(function() {     var id = $("#choose-address-table").find(".nr:first").text();     $("#resultas").append(id); // Testing: append the contents of the td to a div }); 

Table:

<table id="choose-address-table" class="ui-widget ui-widget-content">     <thead>         <tr class="ui-widget-header ">             <th>Name/Nr.</th>             <th>Street</th>             <th>Town</th>             <th>Postcode</th>             <th>Country</th>             <th>Options</th>         </tr>     </thead>     <tbody>         <tr>             <td class="nr"><span>50</span>             </td>             <td>Some Street 1</td>             <td>Leeds</td>             <td>L0 0XX</td>             <td>United Kingdom</td>             <td>                 <button type="button" class="use-address" />             </td>         </tr>         <tr>             <td class="nr">49</td>             <td>Some Street 2</td>             <td>Lancaster</td>             <td>L0 0XX</td>             <td>United Kingdom</td>             <td>                 <button type="button" class="use-address" />             </td>         </tr>     </tbody> </table> 

Answer 1

The object of the exercise is to find the row that contains the information. When we get there, we can easily extract the required information.

Answer

$(".use-address").click(function() {     var $item = $(this).closest("tr")   // Finds the closest row <tr>                         .find(".nr")     // Gets a descendent with class="nr"                        .text();         // Retrieves the text within <td>      $("#resultas").append($item);       // Outputs the answer }); 

VIEW DEMO

Now let's focus on some frequently asked questions in such situations.

How to find the closest row?

Using .closest():

var $row = $(this).closest("tr"); 

Using .parent():

You can also move up the DOM tree using .parent() method. This is just an alternative that is sometimes used together with .prev() and .next().

var $row = $(this).parent()             // Moves up from <button> to <td>                   .parent();            // Moves up from <td> to <tr> 

Getting all table cell <td> values

So we have our $row and we would like to output table cell text:

var $row = $(this).closest("tr"),       // Finds the closest row <tr>      $tds = $row.find("td");             // Finds all children <td> elements  $.each($tds, function() {               // Visits every single <td> element     console.log($(this).text());        // Prints out the text within the <td> }); 

VIEW DEMO

Getting a specific <td> value

Similar to the previous one, however we can specify the index of the child <td> element.

var $row = $(this).closest("tr"),        // Finds the closest row <tr>      $tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element  $.each($tds, function() {                // Visits every single <td> element     console.log($(this).text());         // Prints out the text within the <td> }); 

VIEW DEMO

Useful methods

• .closest() - get the first element that matches the selector
• .parent() - get the parent of each element in the current set of matched elements
• .parents() - get the ancestors of each element in the current set of matched elements
• .children() - get the children of each element in the set of matched elements
• .siblings() - get the siblings of each element in the set of matched elements
• .find() - get the descendants of each element in the current set of matched elements
• .next() - get the immediately following sibling of each element in the set of matched elements
• .prev() - get the immediately preceding sibling of each element in the set of matched elements

Answer 2

You need to change your code to find the row relative to the button which was clicked. Try this:

$(".use-address").click(function() {     var id = $(this).closest("tr").find(".nr").text();     $("#resultas").append(id); }); 

Example fiddle