¿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.