1

estou com um problema ao qual não estou conseguindo resolver tenho uma tela de pedido de vendas onde a mesma tem que fazer o calculo de quantidade X valor unitario = (preencher o valor total e somar no total do pedido), como faço para realizar este calculo com jquery alguem pode me ajudar segue parte do codigo abaixo.

<table id="table-itens" class="table table-bordered table-hover table-striped">
	<thead>
		<tr class='info'><th colspan='6'>Itens do pedido de venda</th></tr>
		<th class="th_codigo">Produto</th> 
		<th>Quantidade</th>   
		<th class="th_unitario">Valor Unit.</th>
		<th class="th_total">Total</th>
	</thead>
	<tbody>
		<tr id='line1' >
			<td><input type='text' class='form-control input-sm codigo' value='29832' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm codigo' type='text'  name='ITEMARRAY[1][quantidade]' value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[1][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[1][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr id='line2' >
			<td><input type='text' class='form-control input-sm codigo' value='29835' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm codigo' type='text'  name='ITEMARRAY[3][quantidade]'   value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[3][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[3][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr class='info'>
			<td colspan='3'></td>
			<td class='total' colspan='2'><b>Total do pedido R$ : </b></td>
			<td><div id='total'><span class='value_total'></span> </div></td>
		</tr>
	</tbody>
</table>

Meu codigo jquery esta assim, o mesmo já esta calculando os valores das linhas mas não consigo preencher o valor total da linha somente passando por cima do campo tem alguma forma automatica de fazer isso quando preencher a quantidade e o valor unitario ele ja gatilha o total da linha e soma no total?

$(window).ready(function () {
        $('#table-itens tr td.class_quant').keyup(function () {
            var quantidade = $(this).find('#qtn02').val();
            $('#table-itens tr td.class_unit').keyup(function () {
                valor_unitario = $(this).find('#valor_unitario03').val();
                var total = (quantidade * valor_unitario);
                $('#table-itens tr td.class_total').keyup(function () {
                    $(this).find('#total02').attr('value', total);
                });
            });
        });
    });

1 Resposta 1

0

Uma forma seria monitorar os campos de quantidade e valor unitário e quando houver uma ação, percorrer todos campos e calcular os valores:

Primeiramente, coloque uma classe específica para o campo de quantidade, no seu html os campos do código e da quantidade estão com a mesma classe codigo.

Exemplo:

  //Quando houver alguma ação nos campos quantidade ou valor unitario
  $('.qtd, .vlr_unitario').on('change blur keyup',function(){
    $('.qtd').each(function(){//percorre todos os campos de quantidade
      //quantidade
      var qtd = $(this).val();
      //pega o valor unitário
      var vlr = $(this).parent('td').siblings('td.class_unit').children('.vlr_unitario').val();
      // coloca o resultado no valor total
      $(this).parent('td').siblings('td').children('.total').val(qtd * vlr);
    });
    //Soma o valor total do pedido
    var total = 0;
    $('.total').each(function(){
      if($(this).val()){
        total += parseFloat($(this).val());
        $('.value_total').html(total);
      }
    });
  });
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-itens" class="table table-bordered table-hover table-striped">
	<thead>
		<tr class='info'><th colspan='6'>Itens do pedido de venda</th></tr>
		<th class="th_codigo">Produto</th> 
		<th>Quantidade</th>   
		<th class="th_unitario">Valor Unit.</th>
		<th class="th_total">Total</th>
	</thead>
	<tbody>
		<tr id='line1' >
			<td><input type='text' class='form-control input-sm codigo' value='29832' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm qtd' type='text'  name='ITEMARRAY[1][quantidade]' value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[1][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[1][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr id='line2' >
			<td><input type='text' class='form-control input-sm codigo' value='29835' disabled /></td>
			<td class='class_quant'> <input class='form-control input-sm qtd' type='text'  name='ITEMARRAY[3][quantidade]'   value=''  id='qtn02'   required/></td>
			<td class='class_unit'>   <input class='form-control input-sm vlr_unitario' type='tel' name='ITEMARRAY[3][vlr_unitario]' id='valor_unitario03'   required /></td>
			<td class='class_total'> <input class='form-control input-sm total' type='text'    name='ITEMARRAY[3][total]'       id='total02' readonly='readonly' /></td>
		</tr>
		<tr class='info'>
			<td colspan='3'></td>
			<td class='total' colspan='2'><b>Total do pedido R$ : </b></td>
			<td><div id='total'><span class='value_total'></span> </div></td>
		</tr>
	</tbody>
</table>

Observação: Esta é uma sugestão para se ter ideia de como fazer, não tratei os campos para testar valores ou fazer arredondamentos.

3
  • 1
    Muito obrigado, funcionou perfeitamente, cara o que tu me recomenda para aprimorar conhecimentos em jquery algum site especifico? Commented 31/05/2016 às 19:51
  • @MaiconFernandoStefenedaSil se a resposta foi útil para você marque-a como aceita, assim ela pode ajudar a outras pessoas com a mesma dúvida. Sobre os conhecimentos em jQuery não sei indicar nenhum site específico, aconselho ver a documentação do próprio jQuery, ou melhor dizendo, este site é muito bom para aprimorar os conhecimentos. :)
    – abfurlan
    Commented 31/05/2016 às 20:22
  • 1
    beleza, vou fazer isso o problema agora é o inglês acho os exemplos as vezes muitos simples mas foi de grande valia, abraço. Commented 1/06/2016 às 2:21

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 .