0

Tengo un proyecto en Java Web y mi consulta es cómo lograr editar y eliminar tanto "n" columnas como "n" filas en una tabla dinámica en la cual se agregan datos a la base de datos y desde esa misma base de datos se sustraen los elementos que requiero editar o eliminar a gusto. Un ejemplo de cómo imprimo mi tabla es lo siguiente:

<table class="table table-bordered" id="tablaFinanzas">
                    <thead class="thead-dark">
                        <tr id="columnaTabla">
                            <th>Ingresos</th>
                                <%
                                    String accionRepetidaTitlle = "";
                                    for (int i = 0; i < listaRegistro.size(); i++) {
                                        accionRepetidaTitlle = listaRegistro.get(i).getAccion();

                                        for (int j = 0; j < listaRegistro.size(); j++) {
                                            if (accionRepetidaTitlle.equals(listaRegistro.get(j).getAccion())) {
                                                out.print("<th>" + dao_mes.getMesPorId(j + 1).getNombre() + "</th>");
                                                i++;
                                            }
                                        }
                                        break;
                                    }

                                    String accion = "";

                                    int accionRepetida = 0;

                                    for (int i = 0; i < listaRegistro.size(); i++) {
                                        accion = listaRegistro.get(i).getAccion();
                                        accionRepetida = 0;
                                        out.println("<tr>");
                                        out.println("<td class=td><input type=text class=form-control value='" + accion + "'></td>");
                                        for (int j = 0; j < listaRegistro.size(); j++) {
                                            if (accion.equals(listaRegistro.get(j).getAccion())) {
                                                out.println("<td class=td ><input type=text class=form-control value='" + listaRegistro.get(j).getDato() + "'></td>");
                                                i++;
                                                accionRepetida++;
                                            }
                                        }
                                        out.println("</tr>");
                                    }
                                %>
                        </tr>
                    </thead>
                    <%
                    %>
                </table>
                <div class="">
                    <button type="button" class="btn btn-success" onclick="agregarFila()">Agregar fila</button>
                    <button type="button" class="btn btn-danger" onclick="eliminarFila()">Eliminar fila</button>
                    <button type="button" class="btn btn-success" onclick="agregarColumna()">Agregar columna</button>
                    <button type="button" class="btn btn-danger" onclick="eliminarColumna()">Eliminar columna</button>
                </div>

Entonces la idea es que si se modificaron ciertos datos/celdas o si se eliminan a través de un botón "eliminar fila" o "eliminar columna" se puedan registrar estos cambios en la base de datos con un único botón que es "guardar avance" cuando el usuario lo requiera. El proyecto en sí se ve esta forma ya con datos agregados y extraídos desde la base de datos: introducir la descripción de la imagen aquí

EDIT: Pude realizar un Editar gracias a las ideas de este foro, el código en el JSP queda de esta manera:

var inputEntrada = "";
        var inputSalida = "";
        $(document).ready(function () {
            $("input").click(function () {
                inputEntrada = $(this).val();
                console.log("Input de entrada: " + inputEntrada);
                
            });
            $("input").focusout(function () {
                inputSalida = $(this).val();
                console.log("Input de salida: " + inputSalida);
                if (inputSalida !== inputEntrada) {
                    //AJAX
                    $.ajax({
                        url: "editarDato.do",
                        method: "POST",
                        data: {
                            inputEntrada : inputEntrada,
                            inputSalida : inputSalida,
                            idFlujo : <%= idFlujo%>
                        }
                    }).done(function (response) {

                    });
                    //Término AJAX
                } else {
                    console.log("Valores iguales");
                }
            });


        });

De parte del controlador es así:

try {
            String datoNuevo = request.getParameter("inputSalida");
            String datoViejo = request.getParameter("inputEntrada");
            String idFlujo = request.getParameter("idFlujo");
            
            DAO_RegistroTabla daoRegistro = new DAO_RegistroTabla();
            daoRegistro.editarDato(datoNuevo, datoViejo, idFlujo);
            
        } catch (Exception e) {
        }

Cumple con lo que quería que era editar, aunque por ejemplo si hay dos datos que son iguales, por ejemplo en la fila 1en dónde está el campo "sueldo" hay un valor en el mes de Enero de 210.000 y en Marzo también y edito uno de los dos me editará ambos, qué tipo de validación necesitaría para este caso?, o alguna manera de acceder solamente a esa celda que quiero en particular y compararla con mi base de datos? lo veo algo difícil puesto que no trabajo con id en las celdas debido a que es una tabla totalmente dinámica en dónde el usuario podrá interactuar a gusto agregando y eliminando tanto filas como columnas. Un saludo de ante mano y muchas gracias!

1

1 respuesta 1

0

Debes de recoger la fila donde estás haciendo click.para ello puedes usar jquery:

$("#tuTabla").find('td:eq(0)').text(); // de esta manera obtendrías el id
// para eliminar la fila lo podrías hacer así

$(document).on('click', '.borrar', function (event) {
    event.preventDefault();
    $(this).closest('tr').remove();
});

// aquí capturamos el botón por la clase borrar posteriormente, borraríamos el tr

Antes de borrar la fila, podrías hacer una llamada ajax para eliminar de la db y si el resultado ha sido bueno, entonces ya eliminas la fila: sería similar a esto:

$(document).on('click', '.borrar', function (event) {
        event.preventDefault();
        $.ajax({
          url: 'tu ruta o archivo.php',
          method: 'POST',
          data:{'id': 'tu id capturado antes para eliminar el registro'},
          success: function(response){
             $(this).closest('tr').remove();
           },
           error: function(){
              "capturar error y hacer algo con el, por ejemplo un alert"
            }
        });
        
    });

antes de eso imagino que estas creando una tabla dinamica bien con un for-each en jquery o con php, donde estás creando la tabla, debes añadir otro nuevo td añadiendo un botón para eliminar y otro para editar.

Una vez tengas los botones creados y con la línea de arriba para obtener donde estás haciendo click, obtendrás el id del elemento y podrás hacer una llamada ajax a lo que necesites.

Espero servirte de guía un saludo

4
  • se crea una tabla con datos provenientes de consultas y ciclos y claro, en este caso lo que hago es eliminar filas completas y columnas completas a través de los botones que se indican debajo de la tabla, el botón "eliminar fila" elimina la última fila de la tabla en la que se interactúa y el botón "eliminar columna" elimina la última columna, entonces la idea es que cuando el usuario decida eliminar tanto una fila como columna o en otro caso editar una celda existente el usuario sea capaz de guardar estos cambios a través de un sólo botón el cual se llama "guardar avance" sino, no se editan
    – CL Afro
    Commented el 10 jun. 2021 a las 1:32
  • @CLAfro entonces lo unico que tienes que hacer es añadir eventos onChange o focusout() para que cuando pierda el usuario el foco del campo llames a una función ajax que te guarde los cambios en la DB, lo mismo con el onChange cuando cambie de input haga exactamente lo mismo que lo que comenté anteriormente. Espero haberte servido de ayuda Commented el 10 jun. 2021 a las 6:08
  • Claro meditaré seriamente el eliminar el botón guardar avance y hacer todos los cambios cada vez que el usuario interactúe solamente. En el caso de eliminar filas y columnas lo hago directamente con javascript, se te ocurre alguna forma de eliminar esas filas y columnas tanto de la tabla como de la base de datos?. Un saludo y muchas gracias por tus respuestas, me han dado algunas ideas para avanzar
    – CL Afro
    Commented el 11 jun. 2021 a las 4:50
  • @CLAfro para eliminar las filas, es como te dije en mi respuesta, por lo que ya con jquery podrías eliminar la fila. También podrías añadirle un evento para que cuando se elimine la fila, haga una llamada ajax y elimine de la DB. Actualizo mi pregunta con como podrías hacer el evento al eliminar la fila Commented el 11 jun. 2021 a las 6:07

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.