How to add values from a td column dynamically with jquery?

Asked

Viewed 842 times

0

I have a payment system, which takes the total amount of the purchase and divides the amount of installments requested by the customer, and these installments can have their value changed dynamically, because the customer can give a higher or lower entry value, so far so good.

The problem is having to change parcel value by parcel manually, I wanted that by changing the value of the first installment the others adjust keeping the total value in the sum.

Let’s take an example:

If the total of the purchase is R $ 10,000.00 and the customer resolves installments in 4 equal X, each installment would be R $ 2,500.00, but if the customer decides to give a smaller or larger installment in the first as input, the other installments should adjust, for example the entry was $ 2,000,00, soon the other 3 installments should be adjusted with the remaining value of the total that would be each remaining portion of R $ 2.666,66.

This is the table: Tabela de vencimentos

Below is a sketch of the code to better understand.

$(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>

Everything works the code is meeting me, I just wanted to know if there is this possibility to change the value of the first installment, and the others to adjust automatically.

  • If you change the first one to, for example, "R$1000,00", the others should be "R$1000,00"?

  • Thus the total amount of the purchase R$10,000.00 installments in 4X From R$2,500.00, changes the first to R$2,000.00 the rest should be R$2,266.66, in the sum of all installments should remain the total amount of the purchase

  • ah ta, I thought they should be equal shares.

  • @DVD I’ll edit the question, glad you understand.

  • Always all other installments will adjust according to the new value or installments that were previously edited should keep the manually added value?

  • @Andersoncarloswoss had not thought about this possibility of changing the value of more than one portion, but his reasoning is correct the already edited ones would remain and adjust only the sequents, would be the ideal scenario.

Show 1 more comment

1 answer

1


I created some functions to count the number of lines, the total value to divide between the other lines and other currency format treatments. I also changed the keyup for keypress because it was bugging. Remembering that the code below will only work by changing the first installment value:

$(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>

  • Apparently after one of the fields is edited, the others can no longer be changed. This was expected in your code?

  • @Andersoncarloswoss It wasn’t no. But as the focus is on the first installment, I didn’t notice it.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.