<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Exercício (Jquery)</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link rel="stylesheet" href="assets/js/chosen/docsupport/prism.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
Lançamento de Produtos
</div>
<div class="card-block">
<form class="form-inline">
<select class="form-control" id="nmProduto" style="max-width: 300px;">
<option value="">Selecione o Produto</option>
<option>SUPORTE PARA CARIMBO DE MADEIRA COM 06</option>
<option>BOTON PERSONALIZADO - SESMT</option>
<option>RELOGIO DESPERTADOR 0 A 60 MIN.</option>
<option>ETIQUETA A4 254 25,4X99,0MM - PIMACO</option>
<option>PORTA CARTAO DE VISITA PARA 160</option>
<option>TRILHO PARA PASTA 100MM</option>
<option>PERFIL PLASTICO AZUL 3 X 95 CM</option>
<option>AGENDA 2015 - PERSONALIZADA FCV</option>
<option>ETIQUETA A4 6180 2,5X6,6 - PIMACO</option>
<option>BOBINA PARA IMPRESSORA 1VIA 76MM</option>
<option>CANETA PARA RETRO PROJETOR VERMELHA 1.0MM</option>
<option>JOGO DE LETRAS E NUMEROS PARA TABELA</option>
<option>ETIQUETA ADESIVA A4 C/25</option>
<option>PASTA POLIONDA C/ ELASTICO 35MM - AZUL</option>
<option>BOTON PERSONALIZADO - CIPA</option>
<option>PERFURADOR DE PAPEL PARA 70 FOLHAS</option>
<option>RELOGIO DESPERTADOR</option>
<option>CORRETIVO FITA 8M</option>
<option>CAPA PLASTICA P/ CARTEIRA RADIO/ QUIMIO</option>
<option>GRAMPO PARA GRAMPEADOR 23/15 C/1000UN</option>
<option>CRACHA PLASTICO COM PRENDEDOR</option>
<option>GRAMPEADOR PARA 200 FOLHAS GRAMPO 23/10</option>
<option>CAIXA PAPELAO ARQUIVO MORTO OFICIO</option>
<option>AGENDA PARA TELEFONE</option>
</select>
<label class="sr-only" for="inlineFormInput">Quantidade</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0 ml-sm-2" id="qtProduto" placeholder="Quant" style="width:70px">
<label class="sr-only" for="inlineFormInput">Valor</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="vlProduto" placeholder="Valor (R$)" style="width:98px">
<button type="submit" class="btn btn-primary" id="btnAdicionarProduto">+</button>
<p class="text-danger ml-3 pt-2 invisible" id="msgValidaForm">Favor preencher <strong>todos os campos</strong> do produto!</p>
</form>
<table class="table table-sm table-striped mt-3 table-produtos">
<thead>
<tr>
<th style="max-width: 600px;">Produto</th>
<th>Quantidade</th>
<th class="text-right pr-5">Valor (R$)</th>
<th class="text-right pr-5 vlTotalProduto">Total</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot class="invisible">
<tr>
<th></th>
<th></th>
<th class="text-right">SubTotal ❯</th>
<th class="text-right pr-5" id="vlTotalPedido"></th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="assets/jquery/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.js" type="text/javascript"></script>
</body>
</html>
.delete {cursor: pointer;}
.chosen-results li {font-size: 11px;}
.table-produtos tbody tr td {font-size: 12px;}
$("document").ready(function(){
/* Produto recebe o foco ao chamar o sistema */
$("#nmProduto").chosen().trigger('chosen:activate');
/* Quando o produto for selecionado, a quantidade recebe o foco */
$("#nmProduto").change(function(){
$("#qtProduto").focus();
})
/* Adiciona a máscara ao input do valor do produto ( plugin mask utilizado ) */
$('#vlProduto').mask("00000.00",{reverse: true});
/* Adiciona a máscara ao input de quantidade do produto ( plugin mask utilizado ) */
$('#qtProduto').mask("00000",{reverse: true});
$("#btnAdicionarProduto").on('click', function($e){
/* Evita que o evento ocorra */
$e.preventDefault();
/* Adiciona os produtos somente se o formulário for preenchido */
if(validaForm())
{
/* Declarando a variável tb */
var tb;
/* preenchendo informações na variável tb para inserção no tbody da tabela */
tb = "<tr><td>" + $("#nmProduto").val() + "</td>" +
"<td>" + $("#qtProduto").val() + "</td>" +
"<td class=\"text-right pr-5\">" + ($("#vlProduto").val() * 1).toFixed(2) + "</td>" +
"<td class=\"text-right pr-5\">" + ( $("#vlProduto").val() * $("#qtProduto").val() ).toFixed(2) + "</td>" +
"<td><button class=\"btn btn-light btn-sm delete text-danger\">✖</button></td></tr>";
/* Adiciona a variável tb acima que contém os dados do produto no tbody da tabela.
Estas informações são inseridas no final do tbody */
$("tbody").append(tb);
/* Após inserção da linha do produto, os valores do pedido são atualizados */
atualizaVlPedido();
/* Se existir mais que 1 item no pedido, é removido a classe
invisible do foot da tabela, mostrando assim o valor total do pedido */
if($(".table-produtos tbody tr").length > 0)
$(".table-produtos tfoot").removeClass("invisible");
/* As 3 linhas abaixo redefinem os campos de entrada do produto para deixando-os vazios*/
$("#nmProduto").val('').trigger("chosen:updated");
$("#vlProduto").val('');
$("#qtProduto").val('');
/* Define o foco para a seleção de produtos */
$("#nmProduto").chosen().trigger('chosen:activate');
}
})
/* Ao clicar na ação delete remove a linha dinamicamente da tabela */
$(document).on("click",".delete",function() {
/* Remove a linha referente ao produto clicado */
$(this).parent().parent().remove();
/* Se existir somente um produto no pedido, e for removido, o foot da tabela fica invisível
O foot é usado para mostrar o valor total do pedido */
if($(".table-produtos tbody tr").length === 0)
$(".table-produtos tfoot").addClass("invisible");
/* Após exclusão da linha, os valores do pedido são atualizados */
atualizaVlPedido();
})
/* Validação do Formulário */
function validaForm()
{
var formValid = true;
if($("#nmProduto").val() === "")
formValid = false;
if($("#vlProduto").val() === "")
formValid = false;
if($("#qtProduto").val() === "")
formValid = false;
if(!formValid)
{
/* Remove a classe invisible do elemento msgValidaForm */
$("#msgValidaForm").removeClass("invisible")
/* Após 4 segundo a mensagem desaparece com a classe invisible sendo novamente adicionada */
setTimeout(function(){
$("#msgValidaForm").addClass("invisible")
}, 4000);
return false;
} else
return true;
}
/* Atualiza Valor Total do Pedido */
function atualizaVlPedido()
{
/* Define o valor do pedido */
var vlTotalPedido = 0;
/* Varre todos os valores dos produtos da tabela */
$(".table-produtos tbody tr td:nth-child(4)").each(function() {
vlTotalPedido += parseFloat($(this).text());
})
/* Atualiza o valor do pedido na tabela */
$("#vlTotalPedido").text(vlTotalPedido.toFixed(2));
}
})
