I need to make a button that gets the values that are inside a td

Question

I need to get the value that is inside product-id.

</thead>
<tr>
   <td>
     <button onclick="loading('carregando');" produto-id="70056057210" type="button" class="btn btn-info click-produto" data-toggle="modal" data-target="#myModal"></button>
    </td>

            

I’ve tested it in a number of ways:

 $(function(){
    $(document).on('click', '.btn-danger', function(e) {
        e.preventDefault;
        var id = $(this).closest('tr').find('td[produto-id]').data('id');
        alert(id);
    });
});

And Below The Button:

<td><button class="btn-danger">Recuperar Id</button></td>

However I Receive

"Undefined"

On Alert How Should I Proceed?

Answer 1

Quick response:

var id = $(this).parents('tr').find('[produto-id]').attr('produto-id');

It is not clear in the question, but it suggests that:

• has a table.
• in each row of this table there are two buttons:
  1. The first button is not identified its class attribute is class="btn btn-info click-produto" and has a non-standard attribute produto-id.
  2. The second button also unidentified, its class attribute is class="btn-danger" and has an event associated with it.
• the purpose of the code is, through the event associated with the second button, to obtain the value of the attribute produto-id belonging to the first button, which is in the same line as the second button and display it in an Alert.

I should advise you not to use non-standard attributes. The ideal is to use attributes data-*. The global attributes data-* allow information are exchanged via script between the HTML and its representation GIFT.

Assuming that there is some obstacle preventing you from using a date attribute, what you can do is from the second button on the document hierarchy until you find the line that is the parent of the element and then go down the hierarchy searching for in your children the element that has the attribute produto-id and get that value:

• Go up the hierarchy of ancestors use the method parents() with the selector 'tr'.

• Search for the descendants of an element use the method find() with the selector '[produto-id]' that selects the elements that have the specified attribute.

• Get the value of an attribute from the first element of a selection, with the method attr() passing the attribute name 'produto-id' as selector.

$(function() {
  $(document).on('click', '.btn-danger', function(e) {
    e.preventDefault;
    var id = $(this).parents('tr').find('[produto-id]').attr('produto-id');
    alert(id);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <button onclick="loading('carregando');" produto-id="70056057210" type="button" class="btn btn-info click-produto" data-toggle="modal" data-target="#myModal">...‍♂️...</button>
    </td>
    <td><button class="btn-danger">Recuperar Id</button></td>
  </tr>
  <tr>
    <td>
      <button onclick="loading('carregando');" produto-id="88943346723" type="button" class="btn btn-info click-produto" data-toggle="modal" data-target="#myModal">...‍♂️...</button>
    </td>
    <td><button class="btn-danger">Recuperar Id</button></td>
  </tr>
</table>

Answer 2

Try it this way.

 var id = $(this).closest('tr').find('button[produto-id]').data('id');