0

tengo este código que al seleccionar unos checkbutton hace una llamada AJAX por post y los datos devuelvos en JSON construye una tabla html, a dicha tabla le añado dinamicamente un boton con el atributo ID, esto es el código actual que funciona al 100%.

 $(".form-check-input").click(function(){

            $.ajax({
                url:  editUrl,
                method: 'POST'
            }).done(function (data) {

                $("#alimentsMaster").find("tr:gt(0)").remove();

                $.each( data, function( key, value ) {


                    $('#alimentsMaster').append('<tr id=' + value['id'] +'><td>'+ value['name']+'</td>' +
                        '<td>' + value['quantity']+ '</td>' +
                        '<td>' + value['weight']+ '</td>' +
                        '<td><button class="btnLink" id='+value['id']+'>VER</button></td>' +
                        '</tr>');

                });

            });
        });

    });

El problema lo tengo en el evento de dicho botón que es 1 botón por fila, como capturo el botón y en dicho botón "recojo" los datos del ROW.

Es decir genero una table con estos elementos con el código anterior

TABLA
TR
TD
id : 22 , nombre : azucar


Mi idea es al hacer "click" en dicho botón como tengo el "ID" en el evento click del botón recuperar los atributos mediante este id.

Pensava que así lo podria hacer, pero veo que no.

            $(".btnLink").click(function() {
            var boton = $(this).val();
            console.log(boton);
            return false;
        });

Gracias,

1 respuesta 1

2

Esto es un ejemplo de como acceder a los textos de cada td dentro de un tr

'<tr id=' + value['id'] +'><td>'+ value['name']+'</td>' +
     '<td>' + value['quantity']+ '</td>' +
     '<td>' + value['weight']+ '</td>' +
     '<td><button class="btnLink" id='+value['id']+'>VER</button></td>' +
'</tr>'

Acá tienes un conflicto en el DOM, el tr y el button tienen el mismo id; por eso lo modifique en el ejemplo y lo agregue como atributo dataset data-id

$('.btnLink').click(function(event) {
var idBoton = $(this).data('id');
/*$('#'+idBoton).map(function() {
    console.info( $(this).text());  //Así podrías obtener todos los textos de cada td
});*/
console.info($('#'+idBoton+' td:first').text());  //Acá obtienes solo en texto [Azucar, Sal] depende del botón que presionen
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<table>
<tr id="22">
  <td>azucar</td>
  <td>20</td>
  <td>1</td>
  <td><button data-id="22" class="btnLink">VER</button></td>
</tr>
<tr id="23">
  <td>Sal</td>
  <td>10</td>
  <td>2</td>
  <td><button data-id="23" class="btnLink">VER</button></td>
</tr>
</table>

2
  • En mi caso este código lo que me hace es enviar el formulario , no me responde al evento del botón programado.
    – ilernet
    el 31 may. 2020 a las 6:19
  • @ilernet al final si te sirvió para obtener lo que necesitas? el 2 jun. 2020 a las 17:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.