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.
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.