How to recover object ID in Jquery table row

Question

Guys, here’s the thing, I get the database data and I set up a table with all this, I need in each line to store the value of the client id coming from the bank too so later I can delete, change etc..

$(document).ready(function () {

    $(document).off("click", "#idBtnDelete").on("click", "#idBtnDelete", function () {

        alert('Entrei');
        var valor = $(this).parent("idExclusao").val();
        alert(valor);

        $.ajax({
            type: "GET",
            url: "http://localhost:9080/AluguelCarros/aluguelRest/cliente/delete/",
            data: "",
            async: false,
            cache: false,
            dataType: 'json',
            success: function () {
                alert('Excluido com sucesso!');

            }
        });


    });

});





$.ajax({
    type: "GET",
    url: "http://localhost:9080/AluguelCarros/aluguelRest/cliente/lista",
    data: "",
    async: false,
    cache: false,
    dataType: 'json',
    success: function (resultLista) {

        var html = "<table id=idTbClientesJ class=table table-striped table-bordered table-condensed table-hover>"

        html += "<thead> <tr><th>Nome</th><th>Telefone</th><th>CPF</th><th>Habilitacao</th><th>Email</th><th>Editar</th><th>Excluir</th></tr></thead>";
        html += "<tbody>";
        for (var i = 0; i < resultLista.length; i++) {

            html += "<tr>"
                + "<td>" + resultLista[i].pessoaFisica.nome + "</td>"
                + "<td>" + resultLista[i].pessoaFisica.telefone.numero + "</td>"
                + "<td>" + resultLista[i].pessoaFisica.documentoPessoaFisica.cpf + "</td>"
                + "<td>" + resultLista[i].pessoaFisica.documentoPessoaFisica.habilitacao + "</td>"
                + "<td>" + resultLista[i].pessoaFisica.email + "</td>"
                + "<td>" + "<i class=\"fas fa-edit fa-2x\"></i>" + "</td>"
                + "<td>" + "<a href=\"\"><b id=idBtnDelete" + "><i class=\"fas fa-trash-alt fa-2x\"></i></b></a>" 
                + "<input type=\"hidden\" name=\"NomeIdExclusao\" id=\"idExclusao" +"+\" value="+ resultLista[i].codCliente +">" + "</td>"
                + "</tr>";
        }


        html += "</tbody>";

        $("#idTbClientes").html(html);

    }
});

This way it always returns me "Undefined" and if I directly put the id to assign the value, it always returns me the value of a single code, in the case of the last of the list.

Answer 1

A more elegant approach you can use would be the data Attributes.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_data

https://api.jquery.com/data/

I set up an example with this approach using the data in your table.

https://jsfiddle.net/3gxdwy9c/1/

HTML code

<div id="container">


</div>

JS/JQUERY code

var dados = [
    {
    id: 1,
    nome:'Joao da Silva',
    cpf: '999.999.999-99',
    telefone: '11 3023-2323'
  },
  {
    id: 2,
    nome:'Maria Souza',
    cpf: '888.888.888-88',
    telefone: '11 3023-2323'
  }
]

$(document).ready(function(){

  var $tabela = $('<table>');

  $tabela.append(montarThead());

  $tabela.append(montarConteudo());

  $('#container').html($tabela);

  $('body').on('click', '.btnExcluir', function(e){

    var id = $(this).parent().data('id');

    alert(id);

  });

})

function montarThead(){

    var $thead = $('<thead>');

  var $tr = $('<tr>').append($('<th>Nome</th>')).append($('<th>CPF</th>')).append($('<th>Telefone</th>'));

  $thead.html($tr);

  return $thead;
}

function montarConteudo(){

    var $tbody = $('<tbody>');

    for(var i = 0; i < dados.length; i++){

    var $linha = $('<tr>');

    $linha.data('id', dados[i].id);

    $linha.append($('<td>' + dados[i].nome + '</td>'));

    $linha.append($('<td>' + dados[i].cpf + '</td>'));

    $linha.append($('<td>' + dados[i].telefone + '</td>'));

    var $botaoExcluir = $('<input>').attr({ type: 'button', name:'btn1', value:'Excluir', class:'btnExcluir' });

    $linha.append($botaoExcluir);

    $tbody.append($linha);

  }

  return $tbody;

}