Hola estoy intentando obtener el valor ID de mi table generada dinámicamente, y enviarlo a otro archivo js para eliminar o actualizar dicho dato, la idea es que al seleccionar el botón eliminar llame a la función donde se obtiene el ID y el id del botón, y ya en este proceso eliminar o actualizar por medio de axios a un api.
Este es mi HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Listar Platillos</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Georama:wght@100;400&display=swap" rel="stylesheet">
</head>
<body>
<!-- Contenido principal -->
<div class="flex-container">
<form>
<h1 id="titulo">Lista Platillos</h1>
<a href="agregar.html" class="btn btn-success">Agregar</a>
<hr>
<div>
<table id="tbl-platos" class="tabla-informacion">
<thead>
<tr>
<th>ID</th>
<th>Código</th>
<th>Nombre</th>
<th>Ingrediente</th>
<th>Costo</th>
<th>Editar</th>
<th>Borrar</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="enviar" type="button" value="Aceptar">Aceptar</button>
<button id="volver" type="button" value="Volver">Volver</button>
</form>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="js/platos-servicio.js"></script>
<script src="js/lista-platos-controlador.js"></script>
<script src="js/eliminar-plato.js"></script>
<script src="js/general-service.js"></script>
</body>
</html>
aquí es donde se genera la tabla dinámica y se manda a imprimir en el HTML lista-platos-controlador.js
'use strict';
const tbody = document.querySelector('#tbl-platos tbody');
let mostrar_datos = async() => {
let platos = await listar_platos();
tbody.innerHTML = '';
for (let i = 0; i < platos.length; i++) {
let fila = tbody.insertRow();
fila.insertCell().innerHTML = platos[i]['_id'];
fila.insertCell().innerHTML = platos[i]['codigo'];
fila.insertCell().innerHTML = platos[i]['nombre'];
fila.insertCell().innerHTML = platos[i]['ingrediente'];
fila.insertCell().innerHTML = platos[i]['precio'];
fila.insertCell().innerHTML = '<button id="btnEditar">Editar</button>';
fila.insertCell().innerHTML = '<button type="button" id="btnBorrar">Borrar</button>';
}
};
mostrar_datos();
este sería el archivo eliminar-platillo.js donde se supone que voy a obtener los datos y poder envíarlo a axios, realizar mis validaciones necesarias.
'user strict';
// const BotonRegistrar = document.querySelector('#btnBorrar'); Aquí me funciona cuando el botón es creado directamente en html, por ejemplo en agregar me funciona bien y obtengo el id y puedo envíar a guardar normal, pero en table no funciona.
const inputId = document.querySelector('#_id');
const BotonBorrar = $(this).closest('table').attr('#btnBorrar');
console.log('Boton borrar: ' + BotonBorrar);
const validar = () => {
Swal.fire({
title: 'Desea eliminar este plato?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: 'Borrar',
denyButtonText: `No Borrar`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
let platillo = {
_id: inputId.value
};
eliminarDatos(platillo, '/eliminar-plato');
Swal.fire('Borrado!', '', 'success')
} else if (result.isDenied) {
Swal.fire('No borrado', '', 'info')
}
})
// let error = false;
// if(inputCodigo.value == '') {
// inputCodigo.classList.add('input-error');
// error = true;
// } else {
// inputCodigo.classList.remove('input-error');
// }
};
BotonBorrar.addEventListener('click', validar);