2

estou com um certo bug aqui. Tenho uma função que calcular a quantidade x preço unitário para dar o valor total e com isso fazer o sub total. Como se fosse um carrinho de e-commerce.

$('.total').prop('readonly', true);
$('.vlun').mask("000.000.000.000.000.00", {
    reverse: true
});

function somarPrecos() {
    $('.vltot').prop('readonly', true);
    var $tblrows = $("#pecasList tbody tr");
    $tblrows.each(function(index) {
        var $tblrow = $(this);
        $tblrow.find('.qtd, .vlun').on('change', function() {
            var qtd = $tblrow.find(".qtd").val();
            var unt = $tblrow.find(".vlun").val();
            var subTotal = parseInt(qtd, 10) * parseFloat(unt);
            if (!isNaN(subTotal)) {
                $tblrow.find('.vltot').val(subTotal);
                var grandTotal = 0;
                $(".vltot").each(function() {
                    var stval = parseFloat($(this).val());
                    grandTotal += isNaN(stval) ? 0 : stval;
                });
                $('.total').val(grandTotal);
            }
        });
    });
};

nessa tabela eu posso adicionar e remover produtos. Eu queria que quando removesse a linha deste produto ele subtraisse o valor total do sub total da tabela. Eu fiz uma função para isso e funcionou meia parte pois ele só subtrai apenas 1 vez.

$("#pecasList").on('click', '.remover-peca', function() {
    var removesub = $('.total').val();
    var removetot = $('.vltot').val();
    $(this).each(function() {
        $(this).parents("tr").remove();
        var grandsubTotal = removesub - removetot
        $('.total').val(grandsubTotal);
    });
});

Alguém pode me dar uma luz? html abaixo:

 <div class="row">
    <div class="col-md-12">
        <label>
            Peça:
        </label>
        <div style="float:right;margin-bottom:10px;">
            <button type="button" class="btn btn-warning add-novo"><i class="fa fa-plus"></i> Adicionar peça</button>
        </div>
    </div>
</div>
<table id="pecasList" class="table table-bordered">
    <thead>
        <tr>
            <th class="col-md-1">Qtd</th>
            <th class="col-md-6">Descrição</th>
            <th class="col-md-2">Valor Unitário</th>
            <th class="col-md-2">Valor Total</th>
            <th class="col-md-1">Remover</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <label>Sub-Total:</label>
                <input type="text" class="form-control required total">
            </td>
            <td></td>
        </tr>
    </tfoot>
</table>

Função para adicionar as linhas da tabela:

$(".add-novo").click(function(){
    var linha = '<tr><td><input type="number" class="col-md-12 form-control required qtd" name="pedidoAssistencia.qtd"></td><td><input type="text" class="col-md-12 form-control required nomeproduto" name="pedidoAssistencia.nmpeca"></td><td><input type="text" class="col-md-12  form-control required vlun" name="pedidoAssistencia.vlunit"></td><td><input type="text" class="col-md-12 required form-control vltot" name="pedidoAssistencia.vltotl"></td><td><button type="button" class="btn btn-warning remover-peca btn-block"><i class="fa fa-trash"></i></button></td></tr>'
    $("table tbody").append(linha);
    somarPrecos();
});
0

1 Resposta 1

1

Sugiro apagares a linha e depois calcular de novo o total das linhas que sobram:

$("#pecasList")
  .on('input', 'input', somarPrecos)
  .on('click', '.remover-peca', function() {
    // apaga a linha clicada
    $(this).closest("tr").remove();
    somarPrecos();
  });


function somarPrecos() {
  // calcula de novo o total
  var subTotal = 0;
  $("#pecasList tbody tr").each(function() {
    var qtd = Number($(this).find('.qtd').val());
    var vUnit = Number($(this).find('.vlun').val());
    var total = qtd * vUnit;
    $(this).find('.vltot').val(total);
    subTotal += total;
  });
  $('.total').val(subTotal);
}

$(".add-novo").click(function() {
  var linha = '<tr><td><input type="number" class="col-md-12 form-control required qtd" name="pedidoAssistencia.qtd"></td><td><input type="text" readonly class="col-md-12 form-control required nomeproduto" name="pedidoAssistencia.nmpeca"></td><td><input type="text" readonly class="col-md-12  form-control required vlun" name="pedidoAssistencia.vlunit" value="30"></td><td><input type="text" readonly class="col-md-12 required form-control vltot" name="pedidoAssistencia.vltotl"></td><td><button type="button" class="btn btn-warning remover-peca btn-block"><i class="fa fa-trash"></i></button></td></tr>'
  $("table tbody").append(linha);
  somarPrecos();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <label>
                            Peça:
                        </label>
    <div style="float:right;margin-bottom:10px;">
      <button type="button" class="btn btn-warning add-novo"><i class="fa fa-plus"></i> Adicionar peça</button>
    </div>
  </div>
</div>
<table id="pecasList" class="table table-bordered">
  <thead>
    <tr>
      <th class="col-md-1">Qtd</th>
      <th class="col-md-6">Descrição</th>
      <th class="col-md-2">Valor Unitário</th>
      <th class="col-md-2">Valor Total</th>
      <th class="col-md-1">Remover</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <label>Sub-Total:</label>
        <input type="text" class="form-control required total">
      </td>
      <td></td>
    </tr>
  </tfoot>
</table>

1
  • 1
    Meu calculo de soma estava complexo demais para uma coisa tão simples. Funcionou perfeitamente muito obrigado. Commented 20/06/2017 às 17:58

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 .