0

Estoy intentando editar los datos de uuna tabla con javascript pero al momento de dar en guardar estos datos se sobrescriben sobre la ultima fila y me borra todo lo demás introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

Estoy usando este codigo de javascript para poder editar los datos en la tabla puedo transformar los td en inputs para poder editarlos pero al guardar me viene el error ya que me borra todo lo demas y no me edita solo la fila tengo entendido que html no me sirve pero no he encontrado nada que me ayude a resolver este problema

    <script>
    var editando = false;
    function transformarEnEditable(nodo) {

        if (editando == false) {

            var nodoTd = nodo.parentNode; //Nodo TD
            var nodoTr = nodoTd.parentNode; //Nodo TR
            var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV
            var nodosEnTr = nodoTr.getElementsByTagName('td');

            var Nombre = nodosEnTr[0].textContent;
            var Unidad = nodosEnTr[1].textContent;
            var Precio = nodosEnTr[2].textContent;
            var Cantidad = nodosEnTr[3].textContent;
            var Descuento = nodosEnTr[4].textContent;
            var Observacion = nodosEnTr[5].textContent;

            var nuevoCodigoHtml = '<td><input type="text" name="Nombre" id="Nombre" value="' + Nombre + '" size="15" readonly/></td>' +
                '<td><input type="text" name="Unidad" id="Unidad" value="' + Unidad + '" size="5" readonly/></td>' +
                '<td><input type="text" name="Precio" id="Precio" value="' + Precio + '" size="5" readonly/></td>' +
                '<td><input type="text" name="Cantidad" id="Cantidad" value="' + Cantidad + '" size="5"/></td>' +
                '<td><input type="text" name="Descuento" id="Descuento" value="' + Descuento + '" size="5"/></td>' +
                '<td><input type="text" name="Observacion" id="Observacion" value="' + Observacion + '" size="50"/></td> <td>En edición</td>';

            nodoTr.innerHTML = nuevoCodigoHtml;
            nodoContenedorForm.innerHTML = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos' +

                '<form name = "formulario" method="post" >' +

                '<input class="btn btn-info text-center" type="button" value="Aceptar" onclick="capturarEnvio()"> <input class="btn btn-info text-center" type="reset" value="Cancelar" onreset="anular()">';
           
            editando = "true";
        }

        else {
            alert('Solo se puede editar una línea. Recargue la página para poder editar otra');

        }

    }
    function capturarEnvio() {
        var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV
        var id = $("#txtId").val();
        var Nomb = Nombre.value;
        var Unid = Unidad.value;
        var Prec = Precio.value;
        var Desc = Descuento.value;
        var Cant = Cantidad.value;
        var Obs = Observacion.value;

     
        var nuevoProducto = '<tr class="c-table__row" id="trDato">' +
            '<td class="c-table__cell tdNombre"> ' + Nomb + '</td > ' +
            '<td class="c-table__cell tdUnidad"> ' + Unid + '</td > ' +
            '<td class="c-table__cell tdPrecio"> ' + Prec + '</td > ' +
            '<td class="c-table__cell tdCantidad"> ' + Cant + '</td > ' +
            '<td class="c-table__cell tdDescuento"> ' + Desc + '</td > ' +
            '<td class="c-table__cell tdObservacion"> ' + Obs + '</td > ' +
            '<td><button  class="btn btn-default btnEliminar"  data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="fas fa-trash"></i></button></td>' +
            '</tr>';
        nodoContenedorForm.HTML = "";

        $("#tableResultContent").innerHTML(nuevoProducto);

     }

    function anular() {

        window.location.reload();

    }
</script>

1 respuesta 1

0

Debes cambiar el metodo innerHTML, y usar appendChild()... ocurre que en esta linea

 $("#tableResultContent").innerHTML(nuevoProducto);

Estas sobreescribiendo todo lo que ya existe en ese contenedor con lo que estas pasando dentro de innerHTML ( tu fila editada ), tendrias que usar appendChild para no afectar lo elementos que ya existan

 $("#tableResultContent").appendChild(nuevoProducto);

Fijate ademas, que cuando creas nuevoProducto te falta la accion la editar, solo estas incluyendo la de eliminar

1
  • si bro en teoria ya la habia probado pero al momento de guardar no se eliminan los inputs de la tabla
    – Andres Edu
    el 22 sep. 2022 a las 2:51

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.