2

Conforme o exemplo abaixo, estou tentando somar os valor das linhas Qtde Transferir, que são geradas dinamicamente conforme o resultado do banco, subtrair do valor digitado no campo Quantidade a Transferir e exibir a diferença no campo Falta:

inserir a descrição da imagem aqui

Montei o código abaixo, usando alguns exemplos que encontrei, ele somou as linhas dinâmicas, mas preciso primeiro digitar os valores nas linhas e por ultimo a Quantidade a Transferir para calcular a Falta:

$(document).ready(function() {
    $("#qtde_entrada").on('change', function() {
    if($(this).val().length > 0) {
     var total = 0;
     $('.input').each(function(){
       var valor = Number($(this).val());
       if (!isNaN(valor)) total += valor;
     });
     var final = $("#qtde_entrada").val() - total;
     $("#qtde_falta").val(final);
    }
    });
});

Os inputs estão setados desta forma:

Qtde a Transferir e Falta:

      <tr>
          <td colspan='2'>Quantidade a Transferir:
          <input type = "number" id="qtde_entrada" name = "qtde_entrada"  min="1" max="99999" style="width: 10em;"> -
          <b>Falta: <input type = "number" id="qtde_falta" name = "qtde_falta" class="resultado" style="width: 10em;" readonly></b></td>
      </tr>

Qtde Transferir (dinâmico):

HTML += "<td><input type = 'text' size = '5' name = 'qtde_trans[]' id = 'qtde_trans[]' class='input' ></td></tr>";

Alguma sugestão de como poderia fazer para primeiro digitar o valor total a transferir e conforme for digitado nas linhas ele ir exibindo na falta?

2 Respostas 2

3

Você pode separar o cálculo em uma função:

function calc() {
    if($(this).val().length > 0) {
      var total = 0;
      $('.input').each(function(){
        var valor = Number($(this).val());
        if (!isNaN(valor)) total += valor;
      });
      var final = $("#qtde_entrada").val() - total;
      $("#qtde_falta").val(final);
    }
}

E utilizá-la no evento change tanto do #qtde_entrada quanto dos campos dinâmicos:

$('#qtde_entrada').on('change', calc);
$('table').on('change', '.input', calc);

Repare na segunda linha do código acima, a construção do on está diferente. Como os campos são dinâmicos, você precisa usar algo chamado de delegation. Isso é necessário porque quando você escuta um evento no Javascript, ele associa a função de resposta aos elementos presentes no DOM; então se temos o seguinte código:

`$('.input').on('change', calc);

A função calc vai ser associado ao evento change dos elementos .input presentes no momento da chamada. O que não resolveria seu problema, umas vez que esses campos são dinâmicos e podem ser inseridos na página após a execução do código acima.

Ao utilizarmos a construção:

$('table').on('change', '.input', calc);

A biblioteca jQuery vai associar o evento change ao elemento table, mas vai executar a função calc apenas quando o change ocorrer nos elementos .input. Isso ocorre devido ao event bubbling, que faz com que ao ocorrer um evento em um elemento, ele (o evento) é propagado até o pai mais alto a partir do elemento onde o evento foi iniciado, ou até que a propagação seja cancelada (retornando false ou chamando o método stopPropagation do evento).

Como mostra na imagem abaixo, o evento iniciou no elemento de número 3 e propagou para cima até o elemento de número 1:

inserir a descrição da imagem aqui

Dessa forma o evento não está mais associado apenas aos elementos que existiam na hora da associação. Os novos elementos também vão propagar o evento e a função calc será chamada corretamente.

Veja funcionando: https://jsfiddle.net/bdsb70rh/

3
  • Obrigado pela resposta. Estou olhando no JSfiddle e realmente funcionou. No meu caso ainda não, mas estou revisando novamente.
    – Diego
    27/01/2017 às 15:31
  • @Diego Como aplicou as modificações?
    – rdleal
    27/01/2017 às 15:36
  • 1
    Deu certo, faltou uma # na parte que mudei no var table. Obrigado pela excelente explicação e resposta. Muito obrigado.
    – Diego
    27/01/2017 às 15:43
2

O código quase faz o que deseja, porém não recalcula enquanto está digitando nas linhas. Para isso basta adicioná-las ao evento de alteração.

$(document).ready(function()
{
    $("#qtde_falta").val("? - 0.0"); // Definimos um texto inicial
});
function alteracaoValores() // Quando houver alterações, não importando qual dos campos for (das linhas ou da qtd transferir)
{
    var total = 0.0;
    $('.somatorio').each(function() // Tanto para alteração na linha superior como nas editadas...
    {
        var valor = Number($(this).val());
            if (!isNaN(valor)) total += valor;
    }
    var quant_entr = parseFloat($("#qtde_entrada").val());
    if(!isNaN(quant_entr))
    {
        var final = quant_entr - total;
            $("#qtde_falta").val(final);
    }
    else
    $("#qtde_falta").val("? - " + total); // Colocar texto quando não tiver campo quantidade a transferir preenchido.
}

HTML:

<tr>
      <td colspan='2'>Quantidade a Transferir:
      <input type = "number" id="qtde_entrada" name = "qtde_entrada"  min="1" max="99999" style="width: 10em;" onchange='alteracaoValores();'> -
      <b>Falta: <input type = "number" id="qtde_falta" name = "qtde_falta" class="resultado" style="width: 10em;" readonly></b></td>
</tr>

HTML gerado dinâmicamente:

HTML += "<td><input type = 'text' size = '5' name = 'qtde_trans[]' id = 'qtde_trans[]' class='input somatorio' onchange='alteracaoValores();' ></td></tr>";
1
  • Obrigado pela resposta, mas está dando um erro que não identifiquei porque: SyntaxError: missing ) after argument list var quant_entr = parseFloat($("#qtde_entrada").val());
    – Diego
    27/01/2017 às 15:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .