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});
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>});
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>});
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);});
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.