0

Possuo um sistema de pagamento, que pega o valor total da compra e divide na quantidade de parcelas solicitada pelo cliente, e essas parcelas podem ter seu valor alterado dinamicamente, pois o cliente pode dar um valor de entrada maior ou menor, até aí tudo bem.

O problema é a ter que alterar valor de parcela a parcela manualmente, eu queria que alterando o valor da primeira parcela as demais se ajustem mantendo o valor total na soma.

Vamos a um exemplo:

Caso o o total da compra seja R$10.000,00 e o cliente resolva parcelar em 4 X iguais, cada parcela ficaria R$2.500,00, mas caso o cliente resolva dar uma parcela menor ou maior na primeira como entrada, as outras parcelas deveriam se ajustar, por exemplo a entrada foi de R$ 2.000,00, logo as outras 3 parcelas deveriam se ajustar com o valor restante do total que seria cada parcela restante de R$ 2.666,66.

Está é a tabela: Tabela de vencimentos

Abaixo um esboço do código para entenderem melhor.

$(document).on('click', function() {
  $('#table_com_parcelas tbody tr').each(function(i) {
    $(this).children('td').each(function(p) {
      if (($(this).attr('title') === 'valor') || $(this).attr('title') === 'vencimento') {
        $(this).dblclick(function() { //inicio dblclick

          if ($('td > input').length > 0) {
            return;
          }

          var conteudoOriginal = $(this).text();
          var novoElemento = $('<input/>', {
            type: 'text',
            value: conteudoOriginal
            // blur: somaTds()

          });
          if ($(this).attr('title') === 'valor') {
            $(novoElemento).maskMoney({
              prefix: 'R$ ',
              allowNegative: true,
              thousands: '.',
              decimal: ',',
              affixesStay: true
            });
          }
          if ($(this).attr('title') === 'vencimento') {
            $(novoElemento).mask("99/99/9999");
          }

          $(this).html(novoElemento.bind('blur keydown', function(e) {
            var keyCode = e.which;
            var conteudoNovo = $(this).val();
            if (keyCode == 13 || keyCode == 9 || keyCode == 0 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
              var objeto = $(this);
              $.ajax({
                type: "POST",
                url: "#",
                data: {
                  id: $(this).parents('tr').children().first().text(),
                  campo: $(this).parent().attr('title'),
                  valor: conteudoNovo
                },
                success: function(result) {
                  objeto.parent().html(conteudoNovo);
                  $('#valor_total').text(result);
                }
              });

              var posicao = p + 1;
              $(this).parent()
                .html(conteudoNovo)
                .parents('tr')
                .next()
                .children('td:nth-child(' + posicao + ')')
                .trigger('dblclick');

            } else if (keyCode == 27 || e.type == 'blur')
              $(this).parent().html(conteudoOriginal);
          }));
          $(this).children().select();
        } /*fim dblclick*/ );
      };
    });
  });
});
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table id="table_com_parcelas" class="table table-condensed">
  <thead>
    <tr>
      <th class="align">Parcela</th>
      <th class="align">Vencimento</th>
      <th class="align">Valor</th>
      <th class="align">Forma pagamento</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row-1">
      <td class="align">1 de 3</td>
      <td title="vencimento" class="align">24/10/2017</td>
      <td title="valor" class="align">R$ 13.333,33</td>
      <td title="form" class="align form">
        <div class="form-inline">
          <form id="formulario-1" action="" method="post" data-toggle="validator" role="form"><select name="forma" class="form-control" id="select-1" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-1"></span>
          </form>
        </div>
      </td>
    </tr>
    <tr id="row-2">
      <td class="align">2 de 3</td>
      <td title="vencimento" class="align">24/11/2017</td>
      <td title="valor" class="align">R$ 13.333,33</td>
      <td title="form" class="align form">
        <div class="form-inline">
          <form id="formulario-2" action="" method="post" data-toggle="validator" role="form"><select name="forma" class="form-control" id="select-2" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-2"></span>
          </form>
        </div>
      </td>
    </tr>
    <tr id="row-3">
      <td class="align">3 de 3</td>
      <td title="vencimento" class="align">24/12/2017</td>
      <td title="valor" class="align">R$ 13.333,33</td>
      <td title="form" class="align form">
        <div class="form-inline">
          <form id="formulario-3" action="" method="post" data-toggle="validator" role="form"><select name="forma" class="form-control" id="select-3" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-3"></span>
          </form>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Tudo funciona o código está me atendendo, queria apenas saber se existe essa possibilidade de mudar o valor da primeira parcela, e as demais se ajustarem de forma automática.

6
  • Se mudar a primeira pra, por exemplo, "R$1000,00", as outras devem ficar "R$1000,00" também?
    – Sam
    Commented 24/10/2017 às 19:04
  • Assim o valor total da compra R$10.000,00 parcelado em 4X De R$2.500,00, se altera a primeira para R$2.000,00 as demais deveriam ficar R$ 2.266,66, na soma de todas as parcelas deve permanecer o valor total da compra
    – WMomesso
    Commented 24/10/2017 às 19:06
  • ah ta, achei que deveriam ser parcelas iguais.
    – Sam
    Commented 24/10/2017 às 19:07
  • @DvD vou editar a pergunta, bom que entendeu.
    – WMomesso
    Commented 24/10/2017 às 19:08
  • Sempre todas as outras parcelas irão se ajustar conforme o novo valor ou as parcelas que foram editadas anteriormente devem manter o valor adicionado manualmente?
    – Woss
    Commented 24/10/2017 às 19:10

1 Resposta 1

1

Criei algumas funções para contar o número de linhas, o valor total para dividir entre as outras linhas e outros tratamentos de formato de moeda. Alterei também o listener de keyup para keypress porque estava bugando. Lembrando que o código abaixo só irá funcionar alterando o primeiro valor de parcela:

$(document).ready(function() {
	valor_total = novas_parcelas_temp = 0;
	;
	$("#table_com_parcelas td[title=valor]").each(function(){
		valor_total += Number($(this).text().replace(/[^0-9\,-]+/g,"").replace(',','.'));
	});
	numero_tds = $("#table_com_parcelas td[title=valor]").length-1;
});



$(document).on('click', function() {
  $('#table_com_parcelas tbody tr').each(function(i) {
    $(this).children('td').each(function(p) {
      if (($(this).attr('title') === 'valor') || $(this).attr('title') === 'vencimento') {
        $(this).dblclick(function() { //inicio dblclick

          if ($('td > input').length > 0) {
            return;
          }

          var conteudoOriginal = $(this).text();
          var novoElemento = $('<input/>', {
            type: 'text',
            value: conteudoOriginal
            // blur: somaTds()

          });
          if ($(this).attr('title') === 'valor') {
            $(novoElemento).maskMoney({
              prefix: 'R$ ',
              allowNegative: true,
              thousands: '.',
              decimal: ',',
              affixesStay: true
            });
          }
          if ($(this).attr('title') === 'vencimento') {
            $(novoElemento).mask("99/99/9999");
          }

          $(this).html(novoElemento.bind('blur keypress', function(e) {

			if($(this).parent().attr('title') == 'valor'){

				if(e.type !== "blur"){
					novas_parcelas_temp = ((valor_total - Number($("#table_com_parcelas td[title=valor] input")
					.eq("0")
					.val()
					.replace(/[^0-9\,-]+/g,"")
					.replace(',','.')))/numero_tds)
					.toFixed(2)
					.replace('.','');
				}
	
				if(novas_parcelas_temp != 0){
					novas_parcelas = novas_parcelas_temp.toString().replace(/([0-9]{2})$/g, ",$1");
					if( novas_parcelas.length > 6 ){
						novas_parcelas = novas_parcelas.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
					}
		
					$("#table_com_parcelas td[title=valor]:not(:eq(0))").each(function(){
						$(this).text('R$ '+novas_parcelas);
					});
				}
			}
			
            var keyCode = e.which;
            var conteudoNovo = $(this).val();
            if (keyCode == 13 || keyCode == 9 || keyCode == 0 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
              var objeto = $(this);
              $.ajax({
                type: "POST",
                url: "#",
                data: {
                  id: $(this).parents('tr').children().first().text(),
                  campo: $(this).parent().attr('title'),
                  valor: conteudoNovo
                },
                success: function(result) {
                  objeto.parent().html(conteudoNovo);
                  $('#valor_total').text(result);
                }
              });
              var posicao = p + 1;
              if(p == 2){              
              $(this).parent()
                .html(conteudoNovo)
                .parents('tr')
                .next()
                .children('td:nth-child(' + posicao + ')')
                }else{
                $(this).parent()
                .html(conteudoNovo)
                .parents('tr')
                .next()
                .children('td:nth-child(' + posicao + ')')
                .trigger('dblclick');
                }

            } else if (keyCode == 27 || e.type == 'blur')
              $(this).parent().html(conteudoOriginal);
          }));
          $(this).children().select();
        } /*fim dblclick*/ );
      };
    });
  });
});
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table id="table_com_parcelas" class="table table-condensed">
  <thead>
    <tr>
      <th class="align">Parcela</th>
      <th class="align">Vencimento</th>
      <th class="align">Valor</th>
      <th class="align">Forma pagamento</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row-1">
      <td class="align">1 de 3</td>
      <td title="vencimento" class="align">24/10/2017</td>
      <td title="valor" class="align">R$ 10.000,00</td>
      <td title="form" class="align form">
        <div class="form-inline">
          <form id="formulario-1" action="" method="post" data-toggle="validator" role="form"><select name="forma" class="form-control" id="select-1" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-1"></span>
          </form>
        </div>
      </td>
    </tr>
    <tr id="row-2">
      <td class="align">2 de 3</td>
      <td title="vencimento" class="align">24/11/2017</td>
      <td title="valor" class="align">R$ 10.000,00</td>
      <td title="form" class="align form">
        <div class="form-inline">
          <form id="formulario-2" action="" method="post" data-toggle="validator" role="form"><select name="forma" class="form-control" id="select-2" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-2"></span>
          </form>
        </div>
      </td>
    </tr>
    <tr id="row-3">
      <td class="align">3 de 3</td>
      <td title="vencimento" class="align">24/12/2017</td>
      <td title="valor" class="align">R$ 10.000,00</td>
      <td title="form" class="align form">
        <div class="form-inline">
          <form id="formulario-3" action="" method="post" data-toggle="validator" role="form"><select name="forma" class="form-control" id="select-3" required=""><option value="">Selecione</option><option value="1">Boleto</option><option value="2">Cartão</option><option value="3">Cheque</option><option value="4">Dinheiro</option><option value="5">Transferência</option></select>
            <span class="form-full-3"></span>
          </form>
        </div>
      </td>
    </tr>
  </tbody>
</table>

2
  • Aparentemente depois que um dos campos é editado, os outros não podem mais ser alterados. Isso era esperado no seu código?
    – Woss
    Commented 24/10/2017 às 20:46
  • @AndersonCarlosWoss Não era não. Mas como o foco é na primeira parcela, não me atentei a isso não.
    – Sam
    Commented 24/10/2017 às 21:11

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 .