Tenho um select
mostrando produtos que podem ser inseridos numa tabela clicando no botão + .
Anteriormente quando os valores eram apesentados no formato como está no banco de dados (
9999.99
) eu conseguia calcular o valor dos itens selecionados corretamente, mas quando passei a apresentar os valores no formato do Real (9.999,99
) não consegui mais calcular o total dos produtos selecionados.
Estava aplicando uma conversão no cálculo dessa função:
function calculaTotal(){
var total = 0;
if ($(".iten-preco").length > 0){
$(".iten-preco").each(function(){
total += $(this).text();
});
}
$('#total-orcamento').text(total);
}
Código completo:
function loadItens(){
$.getJSON("https://api.myjson.com/bins/10hz22",function(data){
itens = data;
$.each(data, function(key, val){
$("#select-iten").append("<option value='"+key+"'>"+
val.nome+" ("+ toReal(val.preco) +")</option>");
});
});
}
loadItens();
var itens;
$("#add-iten").click(function(){
var si = $("#select-iten").val();
$(".itens").append("<tr class='iten-added'>"+
"<td>"+itens[si].id+"</td>"+
"<td>"+itens[si].nome+"</td>"+
"<td class='iten-preco'>"+ toReal(itens[si].preco) +"</td>"+
"<td><button class='iten-delete btn btn-danger'>-</button></td>"+
"</tr>");
calculaTotal();
});
$(document).on("click", ".iten-delete", function(){
$(this).parents("tr").remove();
calculaTotal();
});
function calculaTotal(){
var total = 0;
if ($(".iten-preco").length > 0){
$(".iten-preco").each(function(){
total += $(this).text();
});
}
$('#total-orcamento').text(total);
}
function toReal(str){
str = parseFloat(str).toLocaleString('pt-br',{minimumFractionDigits: 2});
return str;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<label for="select-iten">Produtos: </label>
<select id="select-iten" class="form-control">
<option>Selecione</option>
</select>
<input class="btn btn-primary" type="button" id="add-iten" value="+">
</form>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Nome</th>
<th>Preço</th>
<th>Ação</th>
</tr>
</thead>
<tbody class="itens">
</tbody>
<tfoot>
<tr>
<td colspan="2">Total: </td>
<td colspan="2" id="total-orcamento"></td>
</tr>
</tfoot>
</table>
</div>
total += $(this).text()
, paratotal += $(this).text().replace('.','').replace(',','.')
não resolve o seu problema?float
também!