How to take the value of a TD?

Question

I tried several ways (SEVERAL SAME) but did not succeed! Most return me one UNDEFINED

Follows the code:

PHP:

<?php

 require_once('acessabanco.php');

 $objDb = new db();
 $link = $objDb->conecta_banco();

 $sql = "SELECT p.sequencia codigo,
                p.nome_completo nome, 
                c.data_nascimento data, 
                t.celular_1 celular
           FROM pessoas p, 
                clientes c, 
                telefones t 
          WHERE p.sequencia = t.cod_pessoa 
            AND c.cod_pessoa = p.sequencia";
 $exec = mysqli_query($link, $sql);     
 if ($exec){
    while ($clientes = mysqli_fetch_array($exec)){
        echo('<tr><td id="sequencia">' . $clientes['codigo'] . '</td>
              <td>' . $clientes['nome'] . '</td>
              <td>' . $clientes['data'] . '</td>
              <td>' . $clientes['celular'] . '</td>
              <td><button type="button" id="teste" class="btn btn-primary btn-sm">Small button</button></td>
              <td><a type="button" onClick="teste()" class="btn btn-danger btn-sm">Small button</a></td></tr>');
    }
}
?>

JQUERY:

$(document).ready(function () { 

$('#content').css('display', 'none');

$.ajax({
    url: 'php/lista_clientes.php',
    type: 'post',
    success: function (data) {
        $("#carrega_pag").append(data);
    }
});
function teste (){  

$('table tr').each(function(){
    var teste = $(this).closest('td').attr('id');
console.log(teste);
)};

HTML:

    <table class="table table-hover">
  <thead>
    <tr>
      <th>Código</th>
      <th>Nome Completo</th>
      <th>Data de Nascimento</th>
      <th>Celular</th>
      <th>Opções</th>
    </tr>
  </thead>
  <tbody id ="carrega_pag">
  </tbody>
</table>

Imagery:

Could someone help me? I am very grateful! Because I have been here for a long time... Thank you!!

Answer 1

Try it like this:

PHP:

<?php

 require_once('acessabanco.php');

 $objDb = new db();
 $link = $objDb->conecta_banco();

 $sql = "SELECT p.sequencia codigo,
                p.nome_completo nome, 
                c.data_nascimento data, 
                t.celular_1 celular
           FROM pessoas p, 
                clientes c, 
                telefones t 
          WHERE p.sequencia = t.cod_pessoa 
            AND c.cod_pessoa = p.sequencia";
 $exec = mysqli_query($link, $sql);     
 if ($exec){
    while ($clientes = mysqli_fetch_array($exec)){
        echo('<tr><td id="sequencia" >' . $clientes['codigo'] . '</td>
              <td>' . $clientes['nome'] . '</td>
              <td>' . $clientes['data'] . '</td>
              <td>' . $clientes['celular'] . '</td>
              <td><button type="button"  id="'.$clientes["codigo"].'" class="btn_sequencia btn btn-primary btn-sm">Small button</button></td>
              </tr>');
    }
}
?>

jQuery:

$(document).ready(function () { 

    $(".btn_sequencia").on('click', function(){
        alert($(this).attr('id'));
    });

    $('#content').css('display', 'none');

    $.ajax({
        url: 'php/lista_clientes.php',
        type: 'post',
        success: function (data) {
            $("#carrega_pag").append(data);
        }
    });

});

---

Test code:

$(document).ready(function () { 

    $(".btn_sequencia").on('click', function(){
        alert($(this).attr('id'));
    });

    $('#content').css('display', 'none');

    $.ajax({
        url: 'php/lista_clientes.php',
        type: 'post',
        success: function (data) {
            $("#carrega_pag").append(data);
        }
    });

});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table class="table table-hover">
    <thead>
        <tr>
            <th>Código</th>
            <th>Nome Completo</th>
            <th>Data de Nascimento</th>
            <th>Celular</th>
            <th>Opções</th>
        </tr>
    </thead>
    <tbody id ="carrega_pag">
        <tr>
            <td id="sequencia">1</td>
            <td>Joao</td>
            <td>11/11/2017</td>
            <td>99999-9999</td>
            <td><button type="button" id="1" class="btn_sequencia btn btn-primary btn-sm">Small button</button></td>
        </tr>
        <tr>
            <td id="sequencia">2</td>
            <td>Maria</td>
            <td>11/11/2017</td>
            <td>99999-9999</td>
            <td><button type="button" id="2" class="btn_sequencia btn btn-primary btn-sm">Small button</button></td>
        </tr>
    </tbody>
</table>

Answer 2

We need delegate the .on('click'... the new elements returned by Ajax, and use the selector $(this).closest('tr').find('td').first().text() to capture the text of the first td from the button line clicked.

The code would look like this:

$(document).ready(function () { 

   $('#carrega_pag').on('click',".btn_sequencia", function(){
        alert($(this).closest('tr').find('td').first().text().trim());
    });

   $('#content').css('display', 'none');

   $.ajax({
      url: 'conecta.php',
      type: 'post',
      success: function (data) {
         $("#carrega_pag").append(data);
      }
   });

});