Ola estou com um código gostaria que ele fizesse a soma entre as célula de uma tabela e exibisse abaixo no total conforme o código abaixo.
-mais gostaria dinamicamente conforme for adicionando uma outra coluna abaixo do produtos sem que tenha que alterar o javascript.
Segue o meu código de exemplo, alguém dar essa forca aqui pro amigo desde já agradeço ! `
var confirma = document.getElementById("btn-confirma");
var cancela = document.getElementById("btn-cancela");
var enviar = document.getElementById("btn-enviarpedido");
var formulario = document.getElementById("formulario");
var snack = document.getElementById("snack");
var load = document.getElementById("load");
var cadastro = document.getElementById("cadastro");
var soma_13 = document.getElementById("soma-13");
var subtrai_13 = document.getElementById("subtrai-13");
var soma_8 = document.getElementById("soma-8");
var subtrai_8 = document.getElementById("subtrai-8");
var nome;
var fone;
var intervalo;
var qtdade_8 = 0;
var qtdade_13 = 0;
var preco_13= 54.10;
var preco_8 = 17.20;
var total = 0.00;
(function(){
document.getElementById("preco-8").innerHTML = "R$ " + preco_8.toFixed(2).replace('.',',');
document.getElementById("preco-13").innerHTML = "R$ " + preco_13.toFixed(2).replace('.',',');
})();
soma_13.addEventListener("click", function(){
qtdade_13 = qtdade_13 + 1;
AtualizaDados();
},false );
subtrai_13.addEventListener("click", function(){
if(qtdade_13 > 0) qtdade_13 = qtdade_13 - 1;
AtualizaDados();
},false );
soma_8.addEventListener("click", function(){
qtdade_8 = qtdade_8 + 1;
AtualizaDados();
},false );
subtrai_8.addEventListener("click", function(){
if(qtdade_8 > 0) qtdade_8 = qtdade_8 - 1;
AtualizaDados();
},false );
confirma.addEventListener("click", function(){
//snack.className = 'confirmacao animation-snack';
nome = document.getElementById("nome").value;
fone = document.getElementById("telefone").value;
document.getElementById("qtd-13").value = qtdade_13;
document.getElementById("qtd-8").value = qtdade_8;
document.getElementById("pre-13").value = preco_13;
document.getElementById("pre-8").value = preco_8;
document.getElementById("tot").value = total;
cadastro.style.display = "none";
load.style.display = "block";
load.className = 'loading animation-load';
intervalo = setInterval(function(){
finalizaPedido();
},3000);
},false );
enviar.addEventListener("click", function(){
console.log(load);
cadastro.style.display = "block";
},false );
cancela.addEventListener("click", function(){
cadastro.style.display = "none";
},false );
function fone(campo){
if (campo.value.length == 0){
campo.value = "(" + campo.value; }
if (campo.value.length == 3){
campo.value = campo.value + ") "; }
if (campo.value.length == 10){
campo.value = campo.value + "-";}
}
function finalizaPedido(){
clearInterval(intervalo);
console.log("Finalizando");
load.className ='loading animation-load-back';
snack.className = 'confirmacao animation-snack';
enviar.style.display ="none";
document.getElementById("check").innerHTML = " <img src='check_256.png' style='width: 40px;height: 40px;'/>";
formulario.submit();
}
function AtualizaDados(){
document.getElementById("qtdade-13").innerHTML = qtdade_13;
document.getElementById("qtdade-8").innerHTML = qtdade_8;
total = (qtdade_8 * preco_8) + (qtdade_13 * preco_13);
document.getElementById("soma-total").innerHTML = total.toFixed(2).replace('.',',');
}
*{
font-family: "sans-serif";
padding: 0px;
margin: 0px;
}
html{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
h1{
font-family: "sans-serif";
font-size: 18px;
color: #FFFFFF;
font-weight: 700;
vertical-align: middle;
text-align: center;
/*text-shadow: 0 -1px 0 #000;*/
}
.header{
background: #212121;
width: 100%;
height: 40px;
padding-top: 20px;
}
.content{
background: #F5F5F5;
flex: 1;
}
.content table tr td{
/*border: 1px solid #000;*/
}
.footer{
background: #212121;
height: 120px;
z-index: 1;
}
.style1{
color: #FFF;
font-size: 23px;
font-weight: 700;
}
.style2{
color: #FFF;
font-size: 10px;
text-align: center;
text-shadow: 0 -1px 0 #FFF;
}
.style3{
color: green;
font-size: 15px;
text-align: center;
text-shadow: 0 -1px 0 #FFF;
font-weight: 700;
}
.style4{
color: #212121;
font-size: 15px;
text-align: center;
text-shadow: 0 -1px 0 #000;
padding: 7px;
}
.ui-btj table{
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
.ui-btj table tr td{
height: 50px;
margin: 2px;
background: #e3e3e3;
}
.footer table td{
padding: 10px;
vertical-align: middle;
}
.ui-btn-corner{
height: 40px;
margin: 0px;
padding: 5px;
}
.ui-btn{
background: #FEDE02;
padding: 7px 10px 7px 10px;
display: inline-block;
border-radius: 10px;
cursor: pointer;
}
.ui-btn:hover{
background: #FEA002;
}
.ui-btn-up{
background: #F5F5F5;
padding: 7px 20px 7px 20px;
border-radius: 10px;
vertical-align: middle;
text-align: center;
border: 3px solid #ccc;
font-size: 20px;
cursor: pointer;
}
.ui-btn-up:hover{
background: #FEDE02;
}
li{
background: #eBeBeB;
margin-bottom: 2px;
line-height: 7px;
padding-bottom: 5px;
border-bottom:1px solid #ddd ;
}
img{
width: 65px;
height: 90px;
vertical-align: middle;
padding: 5px;
}
.btj-comando{
min-width: 90px;
}
.btj-comando table{
height: 100%;
width: 100%;
}
.btj-comando table tr td{
height: 15px;
}
.circle {
width: 50px;
height: 50px;
border-radius: 40px;
box-sizing: border-box;
border: solid 6px rgba(255, 255, 255, 0.2);
border-top-color: #989898;
animation: spin 1s infinite linear;
margin-left: 70px;
margin-top: 15px;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.loading{
width: 200px;
height: 110px;
background: #dedede;
position: absolute;
padding: 5px;
border-radius: 10px;
border: solid 1px rgba(255, 255, 255, 0.2);
left:20%;
top: 25%;
-webkit-box-shadow: -0px 0px 32px 0px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.45);
box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.45);
display: none;
overflow: hidden;
}
.form{
margin:0% 0% 0% 20%;
width: 200px;
height: 130px;
background: #dedede;
position: absolute;
padding: 10px;
border-radius: 5px;
border: solid 1px rgba(255, 255, 255, 0.2);
top: 25%;
-webkit-box-shadow: -0px 0px 22px 0px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.45);
box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.45);
display: none;
}
#cadastro table tr td{
height: 25px;
padding: 0px;
}
.ui-btn-form{
color: #525252;
vertical-align: bottom;
cursor: pointer;
}
.confirma:hover{
color: blue;
}
.cancela:hover{
color: red;
}
.form input{
margin: 0px;
}
label{
font-size: 12px;
display: inline-block;
}
.confirmacao{
width: 300px;
height: 30px;
background: #525353;
position: absolute;
padding: 20px 10px;
border-radius: 5px;
border: solid 1px rgba(255, 255, 255, 0.2);
top: 60%;
-webkit-box-shadow: -0px 0px 55px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.25);
color: #FFFFFF;
font-weight: 700;
display: none;
}
.animation-snack{
display: block;
animation-duration: 2s;
animation-name: slideup;
}
.animation-load-back{
display: block;
-webkit-animation: slidedownload 1s forwards;
animation: slidedownload 1s forwards;
}
input{
height: 20px;
}
@keyframes slideup{
from{
top: 100%;
}
to{
top: 60%;
}
}
@keyframes slideupload{
from{
top: 100%;
}
to{
top: 40%;
}
}
@keyframes slidedownload{
from{
top: 40%;
}
to{
top: 100%;
display: none;
}
}
.error{
position: absolute;
left: 30%;
color: red;
font-size: 10px;
}
<body>
<div class="header">
<h1 >PEDIDO DE GAS</h1>
</div>
<div class="content">
<ul>
<li>
<table>
<tr>
<td >
<img src="13.png" alt="">
</td>
<td width="80%" class="ui-btj">
<table>
<tr>
<td align="center" ><span class="style3">13kg</span></td>
</tr>
<tr>
<td align="center"><span class="style4" id="preco-13">R$ 0,00</span></td>
</tr>
</table>
</td>
<td class="btj-comando">
<table>
<tr>
<td class="ui-btn-up" id="soma-13">+</td>
</tr>
<tr>
<td class="style4" id="qtdade-13">0</td>
</tr>
<tr>
<td class="ui-btn-up" id="subtrai-13" >-</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<td >
<img src="8.png" alt="">
</td>
<td width="80%" class="ui-btj">
<table>
<tr>
<td align="center" ><span class="style3">8kg</span></td>
</tr>
<tr>
<td align="center"><span class="style4" id="preco-8">R$ 0,00</span></td>
</tr>
</table>
</td>
<td class="btj-comando">
<table>
<tr>
<td class="ui-btn-up" id="soma-8">+</td>
</tr>
<tr>
<td class="style4" id="qtdade-8">0</td>
</tr>
<tr>
<td class="ui-btn-up" id="subtrai-8">-</td>
</tr>
</table>
</td>
</tr>
</table>
</li>
</ul>
</div>
<div class="loading" id="load">
<div class="circle"></div>
<div align="center"><br>
<span>Processando seu Pedido</span>
</div>
</div>
<form id="formulario" action="teste.php" method="post">
<div class="form" id="cadastro">
<input type="hidden" id='qtd-13' name='qtd-13' value="teste1">
<input type="hidden" id='pre-13' name='pre-13'>
<input type="hidden" id='qtd-8' name='qtd-8'>
<input type="hidden" id='pre-8' name='pre-8'>
<input type="hidden" id='tot' name='tot'>
<table >
<tr>
<span class="error" id="error"></span>
</tr>
<tr >
<td colspan="2">
<label for="nome">Nome</label>
<input type="text" id="nome" name="nome" placeholder="Nome Completo" >
</td>
</tr>
<tr>
<td colspan="2">
<label for="telefone">Fone</label>
<input placeholder="(97) 9999-9999" name="telefone" onkeypress="fone(this);" maxlength="16" type="text" id="telefone">
</td>
</tr>
<tr>
<td class="ui-btn-form cancela" align="center" id="btn-cancela">Cancela</td>
<td class="ui-btn-form confirma" align="center" id="btn-confirma">Confirma</td>
</tr>
</table>
</div>
</form>
<div class="confirmacao" id="snack">
<span>Pedido Enviado Com sucesso...</span>
</div>
<footer class="footer">
<table width="100%">
<tbody>
<tr>
<td width="49%">
<div align="center">
<span class="style1">TOTAL</span>
</div>
</td>
<td width="51%">
<div align="center" class="style2">
ENTREGAMOS ATÈ AS 18:00 HS
</div>
</td>
</tr>
<tr>
<td width="49%">
<div align="center">
<span class="style1">R$</span>
<span class="style1" id="soma-total">0,00</span>
</div>
</td>
<td width="51%" id="check" align="center">
<div align="center" class="ui-btn-corner">
<span class="ui-btn" id="btn-enviarpedido">
<span>
Enviar Pedido
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</footer>
</body>
`