I need to add a cell from a html table dynamically

Navigation
0

Hello I'm having a code I would like it to do the sum between the cells of a table and display below in total as per the code below.

-more like dynamically as you add another column below the product without having to change the javascript.

Follow my example code, someone give this gal here to my friend from now thank you! '

 
      
      
      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>

'

    
asked by anonymous 03.01.2017 / 04:50

1 answer

1

Comrade, follow a base to help you. I understood your idea of not having to edit the java-script, so it was necessary to concatenate an id with a fixed name to detect the html ids used.

At the time you generate the html with php (within a loop picking id, product_name and price): 

        <!-- Bloco gerado por PHP -->
        <tr>
            <td class="prodtd">

                <div id="nome<?php echo $id; ?>"  class="nomeprod"> <?php echo $nome_produto; ?></div>

                <div id="preco<?php echo $id; ?>" class="preco">    <?php echo $preco; ?></div>

            </td>
            <td align="center" valign="middle">

                <input type="button" value="-" onclick="remove(<?php echo $id; ?>)"> 

                <span id="qtd<?php echo $id; ?>">0</span> 

                <input type="button" value="+" onclick="adiciona(<?php echo $id; ?>)">

            </td>
        </tr>
        <!-- Fim Bloco gerado por PHP -->

Below is sample code working: 

// java-script

total = 0;
        
        function adiciona(id)
        {
            calcula(id,"adicao");
        }
        
        function remove(id)
        {
            calcula(id,"subtracao");
        }    
            
        function calcula(id,operacao)
        {
                nomeid  = "nome"+id;
                precoid = "preco"+id;
                qtdid   = "qtd"+id;
                
                nome  = document.getElementById(nomeid).innerHTML;
                
                preco = document.getElementById(precoid).innerHTML;    
                preco = parseInt(preco);
                
                qtd   = document.getElementById(qtdid).innerHTML;
                qtd   = parseInt(qtd);

                //Debug
                //alert("Produto: " + nome + "\n Preço: " + preco);    
                
                if(operacao=="adicao")
                {
                    total = total + preco;
                    qtd = qtd + 1;
                }
                else
                {
                    total = total - preco;
                    qtd = qtd - 1;
                }
                
                document.getElementById(qtdid).innerHTML = qtd;
                
                document.getElementById("total").innerHTML = total;
        }    
     
/* css */
        div {text-align:center;}
        table {  border-collapse: collapse; border:1px solid #777; width:500px; margin:auto; }
        .prodtd { width:380px; height:80px; }
        .nomeprod { background-color:#ffa;}
        .preco { background-color:#eee;}
    <body>

        <table>
        
            <!-- Bloco gerado por PHP -->
            <tr>
                <td class="prodtd">
                
                    <div id="nome1"     class="nomeprod">Nome Prod 1</div>
                    
                    <div id="preco1" class="preco">10</div>
                    
                </td>
                <td align="center" valign="middle">
                
                    <input type="button" value="-" onclick="remove(1)"> 
                    
                    <span id="qtd1">0</span> 
                    
                    <input type="button" value="+" onclick="adiciona(1)">
                    
                </td>
            </tr>
            <!-- Fim Bloco gerado por PHP -->
            
            
            
            <!-- Bloco gerado por PHP -->
            <tr>
                <td class="prodtd">
                
                    <div id="nome2"     class="nomeprod">Nome Prod 2</div>
                    
                    <div id="preco2" class="preco">22</div>
                    
                </td>
                <td align="center" valign="middle">
                
                    <input type="button" value="-" onclick="remove(2)"> 
                    
                    <span id="qtd2">0</span> 
                    
                    <input type="button" value="+" onclick="adiciona(2)">
                    
                </td>
            </tr>
            <!-- Fim Bloco gerado por PHP -->        
            
            <tr>
                <td align="center"><b>Total: <span id="total">0<span></b></td>
                <td>&nbsp;</td>
            </tr>
            
        </table>
        


    </body>

To collect values and move to PHP: 

<script>
    function verifica_e_envia()
    {
        array_dados = new Array();

        colecao = document.getElementsByTagName("tr");

        qtd_blocos = colecao.length - 1; // O último tr da tabela é onde fica o total e está sendo descontado
        // É necessário saber a quantidade de blocos para poder usar em um loop catando os valores

        // Percorre os blocos catando nomes, quantidades e valores dos produtos com quantidade maior que zero
        for(i=1; i<=qtd_blocos ;i++)
        {
            qtdid = "qtd"+i;
            qtd   = document.getElementById(qtdid).innerHTML;
            qtd   = parseInt(qtd);

            if(qtd>0)
            {
                obj_tmp = {};

                nomeid = "nome"+i;
                nome   = document.getElementById(nomeid).innerHTML;

                precoid = "preco"+i;
                preco   = document.getElementById(precoid).innerHTML;
                preco   = parseInt(preco);

                obj_tmp.nome  = nome;
                obj_tmp.preco = preco;
                obj_tmp.qtd   = qtd;
                obj_tmp.subtotal = qtd*preco;

                // adiciona elemento no array de dados que será enviado
                array_dados.push(obj_tmp);
            }
        }

        // põe o array_dados no input hidden json_dados
        document.getElementById("json_dados").value = JSON.stringify(array_dados);

        // envia o formulário form_pedido_produtos
        document.getElementById("form_pedido_produtos").submit();

    }
</script>        

<form action="pedido_produtos.php" method="post" id="form_pedido_produtos" >
    <input type="hidden" name="json_dados" id="json_dados">        
    <input type="button" value="Verifica e envia valores" onclick="verifica_e_envia()">
</form>

To read the data in PHP (product_products.php): 

<?php

if(!isset($_POST["json_dados"])) die("Post não enviado.");

$array_dados = json_decode($_POST["json_dados"]);

//var_dump($array_dados);

$total = 0;

foreach($array_dados as $obj)
{
    echo 'Nome: '. $obj->nome . '<br>';
    echo 'Preço: '. $obj->preco . '<br>';    
    echo 'Quantidade: '. $obj->qtd . '<br>';        
    echo 'Subtotal: '. $obj->subtotal . '<br>';    

    echo '<br><br>';

    $total = $total + $obj->subtotal;
}

echo 'Total: '.$total;

Output on the screen after submitting the form, adding 4 products "Name Prod 1" and 5 products "Name Prod 2": 

Nome: Nome Prod 1
Preço: 10
Quantidade: 4
Subtotal: 40

Nome: Nome Prod 2
Preço: 22
Quantidade: 5
Subtotal: 110

Total: 150
    
03.01.2017 / 08:49
Accept cents in a javascript code Error Menu Appears Slowly