0

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);

1 respuesta 1

1

yo lo hice asi:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
      <head>
        <title>Listar Platillos</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      </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://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="lista-platos-controlador.js"></script>
        <script src="eliminar-plato.js"></script>
      </body>
    </html>

JS eliminar-plato.js:

function fnEditar(rel){
   alert("editando:"+rel);
}
        
function fnEliminar(rel){
   alert("eliminando:"+rel);
}

JS lista-platos-controlador.js:

const tbody = document.querySelector('#tbl-platos tbody');
        let mostrar_datos = async () => {
            let platos = [
                {
                    "_id": 1,
                    "codigo": "Codigo 1",
                    "nombre": "Nombre 1",
                    "ingrediente": "Ingrediente 1",
                    "precio": 1
                },
                {
                    "_id": 2,
                    "codigo": "Codigo 2",
                    "nombre": "Nombre 2",
                    "ingrediente": "Ingrediente 2",
                    "precio": 2
                }
            ];
            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 = "<a rel='" + platos[i]['_id'] + "' class='btn btn-info text-white' id='btnEditar' onclick='fnEditar(rel)'>Editar</a>";
                fila.insertCell().innerHTML = "<a rel='" + platos[i]['_id'] + "' class='btn btn-danger text-white' onclick='fnEliminar(rel)' id='btnBorrar'>Borrar</a>";
            }
        };
        mostrar_datos();

me vi forzado a probar con datos en duro antes de pasarte la funcionalidad, espero te sirva, saludos.

2
  • Muchas gracias por la respuesta Commented el 18 nov. 2021 a las 19:48
  • de nada, estamos para ayudar. Commented el 19 nov. 2021 a las 14:33

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.