Get the contents of a table row with a button click Get the contents of a table row with a button click javascript javascript

Get the contents of a table row with a button click


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


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


Try this:

$(".use-address").click(function() {   $(this).closest('tr').find('td').each(function() {        var textval = $(this).text(); // this will be the text of each <td>   });});

This will find the closest tr (going up through the DOM) of the currently clicked button and then loop each td - you might want to create a string / array with the values.

Example here

Getting the full address using an array example here