CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
Danny Rancher
Danny Rancher

Reputation: 2005

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

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?

  1. Get the closest table row to the button, so the same table row as the button and save it in the row variable.
  2. search for every table data container within the same table row to the button.
  3. create a variable "person"
  4. within the current row find html within a label and a FirstName/LastName class.
  5. 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>

Upvotes: 0

Views: 848

Answers (2)

H77
H77

Reputation: 5967

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>

Upvotes: 1

Barmar
Barmar

Reputation: 780688

.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>

Upvotes: 3

Related Questions