Estou montando uma tabela onde as linhas são criadas dinâmicas, nessas linhas estou fazendo uma multiplicação do campo Qtde
* VlrUnitVista
e jogando o valor no campo VlrTotalVista
e está funcionando bem, na primeira linha, nas linhas seguintes os cálculos não estão sendo feitos, como adaptar o código que tenho, código esse pego do site do William Bruno
, para que os cálculos possam ser realizados também nas linhas a serem inseridas?
Uma outra dificuldade que encontrei foi que também preciso fazer o cálculo de Qtde
* VlrUnitPrazo
e jogar o valor no campo VlrTotalPrazo
, fiz alguns testes alterando o nome de algumas funções e até duplicando as mesmas, mas sem chances.
O form que tenho está assim:
<form id="formulario" action="" method="post" >
<div id="mensagem" class=""></div>
<div class="table-responsive">
<table width="100%" class="table table-hover table-bordered" id="products-table">
<tbody>
<tr>
<th colspan="6" rowspan="2"> </th>
<th colspan="4" class="actions">Unidade</th>
<th class="actions"> </th>
</tr>
<tr>
<th colspan="2" class="actions">A vista</th>
<th colspan="2" class="actions">A prazo</th>
<th class="actions"> </th>
</tr>
<tr>
<th width="12%">Produto</th>
<th width="12%">Embalagem</th>
<th width="12%">Concorrência</th>
<th width="10%">Fonte</th>
<th width="10%">Frete</th>
<th width="10%">Qtde</th>
<th colspan="2" class="actions">Unitário</th>
<th colspan="2" class="actions">Total</th>
<th width="18%" class="actions">Ações</th>
</tr>
<tr>
<td width="12%"><input id="Produto" name="Produto[]" type="text" size="10" ></td>
<td width="12%"><input id="Embalagem" name="Embalagem[]" type="text" size="10"></td>
<td width="12%"><input id="Concorrencia" name="Concorrencia[]" type="text" size="10"></td>
<td width="10%"><input id="Fonte" name="Fonte[]" type="text" value="Produtor" size="10"></td>
<td width="10%"><input id="Frete" name="Frete[]" type="text" value="CIF" size="10"></td>
<td width="10%"><input id="Qtde" name="Qtde[]" type="text" size="10"></td>
<td width="11%"><input id="VlrUnitVista" name="VlrUnitVista[]" type="text" size="10"></td>
<td width="6%"><input id="VlrTotalVista" name="VlrTotalVista[]" type="text" size="10"></td>
<td width="8%"><input id="VlrUnitPrazo[]" name="VlrUnitPrazo[]" type="text" size="10"></td>
<td width="8%"><input id="VlrTotalPrazo[]" name="VlrTotalPrazo[]" type="text" size="10"></td>
<td class="actions">
<button class="btn btn-large btn-danger btn-xs" onclick="RemoveTableRow(this)" type="button">Remover</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="11" style="text-align: left;">
<button class="btn btn-large btn-success" onclick="AddTableRow(this)" type="button">Adicionar Linha</button>
</td>
</tr>
</tfoot>
</table>
</div>
A criação das linhas dinâmicas da tabela estão assim:
(function($) {
RemoveTableRow = function(handler) {
var tr = $(handler).closest('tr');
tr.fadeOut(400, function(){
tr.remove();
});
return false;
};
AddTableRow = function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" id="Produto" name="Produto[]" value="" size="10"></td>';
cols += '<td><input type="text" id="Embalagem" name="Embalagem[]" size="10"></td>';
cols += '<td><input type="text" id="Concorrencia" name="Concorrencia[]" size="10"></td>';
cols += '<td><input type="text" id="Fonte" name="Fonte[]" size="10" value="Produtor"></td>';
cols += '<td><input type="text" id="Frete" name="Frete[]" size="10" value="CIF"></td>';
cols += '<td><input type="text" id="Qtde" name="Qtde[]" size="10"></td>';
cols += '<td><input type="text" id="VlrUnitVista" name="VlrUnitVista[]" size="10"></td>';
cols += '<td><input type="text" id="VlrTotalVista" name="VlrTotalVista[]" size="10"></td>';
cols += '<td><input type="text" id="VlrUnitPrazo" name="VlrUnitPrazo[]" size="10"></td>';
cols += '<td><input type="text" id="VlrTotalPrazo" name="VlrTotalPrazo[]" size="10"></td>';
cols += '<td class="actions">';
cols += '<button class="btn btn-large btn-danger btn-xs" onclick="RemoveTableRow(this)" type="button">Remover</button>';
cols += '</td>';
newRow.append(cols);
$("#products-table").append(newRow);
return false;
};
})(jQuery);
E os cálculos estão sendo feitos usando isso:
function id(el) {
return document.getElementById(el);
}
function total( Qtde, VlrUnitVista ) {
return parseFloat(Qtde.replace(',', '.'), 10) * parseFloat(VlrUnitVista.replace(',', '.'), 10);
}
window.onload = function() {
id('Qtde').addEventListener('keyup', function() {
var result = total( this.value , id('VlrUnitVista').value );
id('VlrTotalVista').value = String(result.toFixed(2)).formatMoney();
});
id('VlrUnitVista').addEventListener('keyup', function(){
var result = total( id('Qtde').value , this.value );
id('VlrTotalVista').value = String(result.toFixed(2)).formatMoney();
});
}
String.prototype.formatMoney = function() {
var v = this;
if(v.indexOf('.') === -1) {
v = v.replace(/([\d]+)/, "$1,00");
}
v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");
return v;
};
Estou postando a imagem do meu form, se ajudar.