0

¿Como puedo hacer para obtener los valores de un botón con ajax? Verán, trato de hacer un código dónde mediante ajax estoy haciendo una consulta asíncrona de una vista a un archivo php, la cuestión está en que yo en mi archivo php estoy enviando unos elementos <tr> con su debido <button> de eliminar con el valor de los datos que quiero eliminar, la cosa está en que cuando hago un evento click en jQuery si me atrae el valor pero del <tbody> y no puedo acceder al valor del <button> con la función de jQuery .child().

Adjunto códigos.

HTML

<!DOCTYPE html>
<html>
    <body onload="funcionBuscar()">
        <table >
            <thead>
                <tr>
                    <th scope='col'>Nombre de usuario</th>
                    <th scope='col'>Correo electrónico</th>
                    <th scope='col'></th>
                </tr>
            </thead>
            <tbody id="tabla" value="Lo que salga aquí">
            </tbody>
        </table>
    </body>
</html>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="procesar.js"></script>

jQuery

$(document).ready(funcionprincipal);


function funcionprincipal(){
    $('#tabla').click('.btn',funcionBorrar);
}

function funcionBuscar(){
    $.ajax({
        type: 'POST',
        url: 'procesar.php',
        dataType: 'html'
    }).done(
        function(data){
            $('#tabla').html(data);
        }
    );
}

function funcionBorrar(){
    alert( $(this).child('tr').child('tr').attr('value') );
}

Nótese que en la funcionBorrar estoy mandado un alert con el supuesto valor del button, mas no sale absolutamente nada, si elimino los .child() y solo dejo el $(this).attr('value') me mostrará solo el valor del tbody.

php

<?php
    $conexion = mysqli_connect("localhost", "root", "", "prueba") or die ('no se pudo');
    $tabla = "";
    $Consulta = "SELECT USUARIO, CORREO FROM CUENTAS";
    $Query = mysqli_query($conexion, $Consulta);
    while($rows = mysqli_fetch_assoc($Query)){
        $tabla.="
        <tr class='tr'>
            <td>$rows[USUARIO]</td>
            <td>$rows[CORREO]</td>
            <td class='td'><button value='$rows[USUARIO]' class='btn'>Eliminar</button></td>
        </tr>
        ";
    }
    echo $tabla;
?>

SQL

CREATE DATABASE PRUEBA;
CREATE TABLE CUENTAS(
    USUARIOS VARCHAR(20) NOT NULL,
    CORREO VARCHAR(100) NOT NULL,
    CONTRASENIA VARCHAR(20) NOT NULL
);

Les agradecería si me pudieran apoyar, Gracias.

1 respuesta 1

1

Tu funcionprincipal() debería ser:

function funcionprincipal() {
  $("#tabla").on('click', ".btn", funcionBorrar);
}

Y tu funcionBorrar debería ser:

function funcionBorrar() {
  alert($(this).attr("value"));
}
1
  • Muchísimas gracias, me funcionó perfectamente. Saludos. :) Commented el 2 ago. 2019 a las 21:11

Tu Respuesta

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

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