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  lt td gt  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    lt table id  choose-address-table  class  ui-widget ui-widget-content  gt       lt thead gt           lt tr class  ui-widget-header   gt               lt th gt Name Nr  lt  th gt               lt th gt Street lt  th gt               lt th gt Town lt  th gt               lt th gt Postcode lt  th gt               lt th gt Country lt  th gt               lt th gt Options lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td class  nr  gt  lt span gt 50 lt  span gt               lt  td gt               lt td gt Some Street 1 lt  td gt               lt td gt Leeds lt  td gt               lt td gt L0 0XX lt  td gt               lt td gt United Kingdom lt  td gt               lt td gt                   lt button type  button  class  use-address    gt               lt  td gt           lt  tr gt           lt tr gt               lt td class  nr  gt 49 lt  td gt               lt td gt Some Street 2 lt  td gt               lt td gt Lancaster lt  td gt               lt td gt L0 0XX lt  td gt               lt td gt United Kingdom lt  td gt               lt td gt                   lt button type  button  class  use-address    gt               lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Accepted Answer

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

User · Answer

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

User · Answer

Here is the complete code for simple example of delegate   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt title gt Bootstrap Example lt  title gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  initial-scale 1  gt     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt     lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt    lt  head gt   lt body gt    lt div class  container  gt     lt h2 gt Striped Rows lt  h2 gt     lt p gt The  table-striped class adds zebra-stripes to a table  lt  p gt                 lt table class  table table-striped  gt       lt thead gt         lt tr gt           lt th gt Firstname lt  th gt           lt th gt Lastname lt  th gt           lt th gt Email lt  th gt          lt  tr gt       lt  thead gt       lt tbody gt         lt tr gt           lt td gt John lt  td gt           lt td gt Doe lt  td gt           lt td gt john example com lt  td gt           lt td gt click lt  td gt         lt  tr gt         lt tr gt           lt td gt Mary lt  td gt           lt td gt Moe lt  td gt           lt td gt mary example com lt  td gt           lt td gt click lt  td gt         lt  tr gt         lt tr gt           lt td gt July lt  td gt           lt td gt Dooley lt  td gt           lt td gt july example com lt  td gt           lt td gt click lt  td gt         lt  tr gt        lt  tbody gt     lt  table gt     lt script gt      document  ready function         div   delegate  table tbody tr td nth-child 4     click   function      var  row     this  closest  tr              Finds the closest row  lt tr gt        tds    row find  td nth-child 2            each  tds  function             console log   this  text             var x     this  text            alert x                          lt  script gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

function useAdress       var id       choose-address-table   find   nr first   text    alert  id       resultas   append id      Testing  append the contents of the td to a div      then on your button    onclick  useAdress

User · Answer

The selector   nr first  is specifically looking for the first  and only the first  element having class  nr  within the selected table element  If you instead call  find   nr   you will get all of the elements within the table having class  nr   Once you have all of those elements  you could use the  each method to iterate over them  For example       use-address   click function             choose-address-table   find   nr   each function i  nrElt            var id   nrElt text                resultas   append   lt p gt     id     lt  p gt        Testing  append the contents of the td to a div               However  that would get you all of the td nr elements in the table  not just the one in the row that was clicked  To further limit your selection to the row containing the clicked button  use the  closest method  like so       use-address   click function           this  closest  tr   find   nr   each function i  nrElt            var id   nrElt text                resultas   append   lt p gt     id     lt  p gt        Testing  append the contents of the td to a div

User · Answer

var values       var count   0      tblName   on  click    tbody tr   function  event         this  find  td   each function             values count      this  text           count                  Now values array contain all the cell values of that row can be used like values 0  first cell value of clicked row

User · Answer

Find element with id in row using jquery    document  ready function         button   click function           find content of different elements inside a row      var nameTxt     this  closest  tr   find   name   text        var emailTxt     this  closest  tr   find   email   text          assign above variables text1 text2 values to other elements          name   val  nameTxt            email   val  emailTxt

User · Answer

Try this       use-address   click function          this  closest  tr   find  td   each function             var textval     this  text       this will be the text of each  lt td gt               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

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

Answer

How to find the closest row?

Getting all table cell `<td>` values

Getting a specific `<td>` value

Useful methods

Examples related to javascript

Examples related to jquery

Examples related to button

Examples related to onclick

Examples related to html-table

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

Answer

How to find the closest row?

Getting all table cell <td> values

Getting a specific <td> value

Useful methods

Examples related to javascript

Examples related to jquery

Examples related to button

Examples related to onclick

Examples related to html-table

Getting all table cell `<td>` values

Getting a specific `<td>` value