How to obtain text of a <td> element from another <td> element with jquery

Question

I am trying to use a button inside a table division to set a variable as the same value as another division in the same row, but whenever I run my code (below), it returns the value of all the table divisions concatenated together. I am unsure why this was happening, so I replaced '.children()' with 'childnodes[0]' to try and get only the first name, but this just doesn't work and I don't why.

My html looks like this:

  <table>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td><button>Get First Name</button></td>
    </tr>
  </table>

And my Javascript is this:

$(document).ready(function(){
    $("button").click(function(){
      var first = $(this).closest("tr").childNodes[0].text();
      alert(first)
        })
    });

Answer 1

You could use class identifiers to get information you need as well.

<table>
  <tr>
    <td><span class="first-name">John</span></td>
    <td><span class="last-name">Doe</span></td>
    <td>
      <button class="btn-get-data" data-class="first-name">Get First Name</button>
      <button class="btn-get-data" data-class="last-name">Get Last Name</button>
    </td>
  </tr>
</table>


$(document).ready(function() {
  $(".btn-get-data").click(function() {
    $btn = $(this);
    $tr = $btn.closest('tr');
    var first = $tr.find('.' + $btn.attr('data-class')).html();
    alert(first);
  })
});

If you make the button click generic like so, you can add additional buttons on the page and use that to get the class within that row.

Here is a working fiddle example: https://jsfiddle.net/b1r0nucq/

Answer 2

you could find the :first child and get his html() , as below:

 $(document).ready(function() { $("button").click(function() { var first = $(this).closest("tr").children(":first").html(); alert(first) }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>John</td> <td>Doe</td> <td><button>Get First Name</button></td> </tr> </table>

Answer 3

set a variable as the same value as another division in the same row

there are lots of possibilities for this, here are some (with the most useful first (opinion based))

$("button").click(function() {
  var first = $(this).closest("tr").find("td:first").text();
  var first = $(this).closest("tr").find("td").first().text();
  var first = $(this).closest("tr").find("td").eq(0).text();

  var first = $(this).closest("tr").children().first().text();
  var first = $(this).closest("tr").children().eq(0).text();

  var first = $(this).closest("td").siblings().first().text();
});

it returns the value of all the table cells concatenated together

https://api.jquery.com/text

Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

because you're passing the "tr" to text() it gets the text of all the cells (tds) and their content etc and combines them as one, so you need to limit to the first as you've attempted.

however .childNodes[0] can only be applied to a DOM element/node, while $(this).closest("tr") gives you a jquery object/collection, which doesn't have .childNodes property.

So the jquery equivalent would be to use .children().eq(0) .