Skip to main content
removeu 3 caracteres do conteúdo
Fonte Link
Laércio Lopes
  • 4,4mil
  • 3
  • 29
  • 52

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.

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.

Segue códigoCó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>
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>

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.

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

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.

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>
Fonte Link
Laércio Lopes
  • 4,4mil
  • 3
  • 29
  • 52

Somar itens selecionados

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);
}

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