0

Resulta que tengo una tabla con un body vacio, la cual es asi:

TABLA

<table class="table tablaRollo table-responsive table-striped table-bordered table-sm">
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col">Laminas Cortadas</th>
                                    <th scope="col">Largo Laminas m.m.</th>
                                    <th scope="col" width="300px">Total Cortado</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

Tengo un boton el cual me agrega una nueva fila, cada fila tiene la misma clase mas un contador interno para distinguirlas, por ejemplo cuando agrego la primera fila, esta en un input tenda la clase largo0, cuando agregue la segunda fila esta tendra la clase largo1, y asi sucesivamente.

AGREGAR NUEVA FILA

    var contador=0;
    var fila=0;
    $('.add-new').on('click', function () {

        var row = '<tr>' +
            '<td><input type="text" class="form-control lamina' + contador + '" name="lamina' + contador + '" id="lamina' + contador + '"></td>' +
            '<td><input type="text" class="form-control largo' + contador + '" name="largo' + contador + '" id="largo' + contador + '"></td>' +
            '<td><input type="text" class="form-control total' + contador + '" name="total' + contador + '" id="total' + contador + '"></td>' +
            +
            '</tr>';
        $(".tablaRollo").append(row);
        fila=contador;
        contador++;

});

(contador va estableciendo el numero de la fila (0,12,etc), fila es igual a contador antes de aumentar esto con el fin de poder obtener el valor de input real)

Resulta que tengo un blur que establece cuanto es la multiplicacion de lamina y largo, y el resultado me lo muestra en total

BLUR

//CUENTE TOTAL CORTADO Y DISMINUYE SALDO
    $(document).on('blur', '.largo' + fila, function () {

        var valor1 = parseInt($('.lamina' + fila).val());
        var valor2 = parseInt($('.largo' + fila).val());

        $('.total' + fila).val(valor1 * valor2);

    });

Al generar una nueva fila contador vale 1, mientras fila vale 0 (como solo hay largo0), hasta aqui todo bien. Resulta que al generar una nueva fila otra vez, contador valdra 2, y fila valdra 1, y va existir un input con la clase "largo1", a la hora de realizar el truco de blur, este no funciona, viene mi pregunta, por que la segunda vez no pasa nada, puesto que todo esta correcto??

De antemano muchas gracias por la ayuda.

5
  • En donde estas colocando el segmento de código de blur? el 9 mar. 2020 a las 0:28
  • @JonathanOrta en un archivo js separado (no se si entendí bien la pregunta, lo siento)
    – Baker1562
    el 9 mar. 2020 a las 0:30
  • Como es un archivo separado, las variables no se conocen o bien, solo se va a ejecutar una vez, debe ir en la función de .add-new el 9 mar. 2020 a las 0:56
  • @JonathanOrta si, solo se ejecuta una vez, y no entendi lo ultimo, podrias brindarme un ejemplo por que no comprendi bien
    – Baker1562
    el 9 mar. 2020 a las 1:36
  • El bloque de código que agrega una nueva fila y el blur están en archivos separados? Si es así, en el archivo del blur está definida la variable fila? Sino ahí tenés el problema. Como bien dice @JonathanOrta una opción es poner el código del blur dentro del $('.add-new'). Pero lo ideal sería directamente armar el código del blur de otra forma.
    – azeós
    el 9 mar. 2020 a las 2:54

1 respuesta 1

1

Tu principal problema radicaba en que al momento de inicializar el documento, estabas seteando la variable fila cuando aún no se empezaba a utilizar, por lo tanto siempre sería 0. Y lo segundo, es que no tenías enlazado el evento onblur a algun elemento del DOM, o no por lo que pude ver =/

Considerando todo eso, esto podría funcionar

$(document).ready(() => {
  let contador = 0
  let fila = 0

  $('.add-new').on('click', () => {
  const largo = `largo${contador}`
  const lamina = `lamina${contador}`
  const total = `total${contador}`

  const row = `<tr><td><input type="text" class="form-control ${lamina}" name="${lamina}" id="${lamina}"></td><td><input type="text" class="form-control ${largo}" name="${largo}" id="${largo}" onblur="setTotal(${contador})"></td><td><input type="text" class="form-control ${total}" name="${total}" id="${total}"></td></tr>`

  $(".tablaRollo").append(row)
    //debugger
    fila = contador
    //console.log(fila)
    contador++
  })  
})

function setTotal(fila) {
  //debugger
  const valor1 = parseInt($(`.lamina${fila}`).val())
  const valor2 = parseInt($(`.largo${fila}`).val())

  $(`.total${fila}`).val(valor1 * valor2)
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table tablaRollo table-responsive table-striped table-bordered table-sm">
   <thead class="thead-dark">
      <tr>
         <th scope="col">Laminas Cortadas</th>
         <th scope="col">Largo Laminas m.m.</th>
         <th scope="col" width="300px">Total Cortado</th>
      </tr>
   </thead>
   <tbody></tbody>
</table>

<button class="btn btn-default add-new">Agregar</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Principalmente le asigne el evento setTotal al input de lamina y mejoré un poco la sintaxis basándome en ECMAScript6 :)

Nos comentas si te sirvió ;)

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.