How to retrieve values from table cells in html using jquery?

Question

How can I have the button raise an alert only showing the persons first name and last name from the same row as the button?

I've pasted my current code from jsfiddle below, but the button returns an empty string.

Am I interpreting the javascript incorrectly?

Get the closest table row to the button, so the same table row as the button and save it in the row variable.
search for every table data container within the same table row to the button.
create a variable "person"
within the current row find html within a label and a FirstName/LastName class.
Show a message containing a string conversion of the now populated "person" variable.

HTML

$("button").on("click", function() {
  var row = $(this).closest("tr");
  $("td", row).each(function() {
    var person = {};
    person.FirstName = row.find(".label").find(".FirstName").html();
    person.LastName = row.find(".label").find(".LastName").html();
    alert(JSON.stringify(person));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="label FirstName">John</span></td>
    <td><span class="label LastName">Doe</span></td>
    <td><button class="button">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="label FirstName">Richard</span></td>
    <td><span class="label LastName">Roe</span></td>
    <td><button class="button">Button 2</button></td>
  </tr>
</table>

Why are you looping over the td elements? You're not doing anything with them. There's only one person in each row, but you're alerting it 3 times because there are 3 cells. — Barmar
– Barmar, Commented Jul 11, 2019 at 9:36

Barmar · Accepted Answer · 2019-07-11 09:29:33Z

.find() is for finding elements contained in other elements, but .FirstName is not contained inside .label, they're the same element. To select an element with two classes, put them in the same selector, with no space between them (a space also means to find a descendant element).

    person.FirstName = row.find(".label.FirstName").html();
    person.LastName = row.find(".label.LastName").html();

$("button").on("click", function() {
  var row = $(this).closest("tr");
  $("td", row).each(function() {
    var person = {};
    person.FirstName = row.find(".label.FirstName").html();
    person.LastName = row.find(".label.LastName").html();
    alert(JSON.stringify(person));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="label FirstName">John</span></td>
    <td><span class="label LastName">Doe</span></td>
    <td><button class="button">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="label FirstName">Richard</span></td>
    <td><span class="label LastName">Roe</span></td>
    <td><button class="button">Button 2</button></td>
  </tr>
</table>

H77 · Accepted Answer · 2019-07-11 09:37:33Z

As .find() looks for matches in descendants row.find(".label").find(".FirstName") would look for an element having class .FirstName within the .label element. To match the label itself you can use .find(".label.FirstName")

Also there is no need to iterate through each cell in the row using .each() since the find method already selects the matching cell for you.

$("button").on("click", function() {
  var row = $(this).closest("tr");
  var person = {
    FirstName: row.find(".label.FirstName").html(),
    LastName: row.find(".label.LastName").html()
  };
  console.log(person);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="label FirstName">John</span></td>
    <td><span class="label LastName">Doe</span></td>
    <td><button class="button">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="label FirstName">Richard</span></td>
    <td><span class="label LastName">Roe</span></td>
    <td><button class="button">Button 2</button></td>
  </tr>
</table>

Collectives™ on Stack Overflow

How to retrieve values from table cells in html using jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related