0

tengo la siguiente tabla, en donde el usuario puede agregar una nueva fila, y dependiendo la cantidad de productos y su precio calcula un subtotal y sumando todos los subtotales, funciona solamente con la fila inicial, si agrego una fila nueva, no la toma en cuenta

esta es mi tabla

y estas son mis funciones

<script>
    // generamos un evento click y keyup para cada elemento input con la clase .input
    var input=document.querySelectorAll(".input");
    input.forEach(function(e) {
        e.addEventListener("click",multiplica);
        e.addEventListener("keyup",multiplica);
    });

    // funcion que genera la multiplicacion
    function multiplica() {

        // nos posicionamos en el tr del producto
        var tr=this.closest("tr");

        var total=1;

        // recorremos todos los elementos del tr que tienen la clase .input
        var inputs=tr.querySelectorAll(".input");
        inputs.forEach(function(e) {
            total*=e.value;
        });

        // mostramos el total con dos decimales
        tr.querySelector(".total").value=total.toFixed(2);

        // indicamos que calcule el total
        calcularTotal(this.closest("table"));
    }

    // funcion que calcula la suma total de los productos
    function calcularTotal(e) {
        var total=0;

        // obtenemos todos los totales y los sumamos
        var totales=e.querySelectorAll(".total");
        totales.forEach(function(e) {
            total+=parseFloat(e.value);
        });

        // mostramos la suma total con dos decimales
        e.getElementsByClassName("totales")[0].value=total.toFixed(2);
    }



     function agregarFila(){
                document.getElementById("tablaprueba").insertRow(1).innerHTML = '<td><input type="text" required></td>' +
                    '<td><input type="number" class="monto input" min="0"></td>' +
                    '<td><input type="number" class="monto input" min="0"></td>' +
                    '<td> <input type="text" class="monto total" value="0" disabled></td>';
            }
    </script>

1 respuesta 1

0

Cuando lanzas el código con el que enlazas la función multiplica() a los .input, los que se generan con la función agregarFila(), no se encuentran en el DOM por lo que no la reciben.

Para solucionarlo podrías dentro de la función agregarFila() vincularles el evento a esos nuevos .input.

function agregarFila(){
    document.getElementById("tablaprueba").insertRow(1).innerHTML = '<td><input type="text" required></td>' +
        '<td><input type="number" class="monto input" min="0"></td>' +
        '<td><input type="number" class="monto input" min="0"></td>' +
        '<td> <input type="text" class="monto total" value="0" disabled></td>';
        
      //Accedemos a los .input de la última fila (que es la que se acaba de crear)
      let inputs = document.querySelectorAll('#tablaprueba tr:last-child .input');
      
      //Los recorremos para añadirles los eventos que necesitamos.
      inputs.forEach(function (input) {
        input.addEventListener("click",multiplica);
        input.addEventListener("keyup",multiplica);
      });
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.