1

Estou montando uma tabela onde as linhas são criadas dinâmicas, nessas linhas estou fazendo uma multiplicação do campo Qtde * VlrUnitVista e jogando o valor no campo VlrTotalVista e está funcionando bem, na primeira linha, nas linhas seguintes os cálculos não estão sendo feitos, como adaptar o código que tenho, código esse pego do site do William Bruno, para que os cálculos possam ser realizados também nas linhas a serem inseridas? Uma outra dificuldade que encontrei foi que também preciso fazer o cálculo de Qtde * VlrUnitPrazo e jogar o valor no campo VlrTotalPrazo, fiz alguns testes alterando o nome de algumas funções e até duplicando as mesmas, mas sem chances.

O form que tenho está assim:

<form id="formulario" action="" method="post" >
     <div id="mensagem" class=""></div>

        <div class="table-responsive">
           <table width="100%" class="table table-hover table-bordered" id="products-table">
              <tbody>
                 <tr>
                     <th colspan="6" rowspan="2">&nbsp;</th>
                     <th colspan="4" class="actions">Unidade</th>
                     <th class="actions">&nbsp;</th>
                  </tr>
                 <tr>
                     <th colspan="2" class="actions">A vista</th>
                     <th colspan="2" class="actions">A prazo</th>
                     <th class="actions">&nbsp;</th>
                 </tr>
                 <tr>
                   <th width="12%">Produto</th>
                    <th width="12%">Embalagem</th>
                    <th width="12%">Concorrência</th>
                    <th width="10%">Fonte</th>
                    <th width="10%">Frete</th>
                    <th width="10%">Qtde</th>
                    <th colspan="2" class="actions">Unitário</th>
                    <th colspan="2" class="actions">Total</th>
                    <th width="18%" class="actions">Ações</th>
                 </tr>
                 <tr>
                    <td width="12%"><input id="Produto" name="Produto[]" type="text" size="10" ></td>                        
                    <td width="12%"><input id="Embalagem" name="Embalagem[]" type="text" size="10"></td>
                    <td width="12%"><input id="Concorrencia" name="Concorrencia[]" type="text" size="10"></td>
                    <td width="10%"><input id="Fonte" name="Fonte[]" type="text" value="Produtor" size="10"></td>
                    <td width="10%"><input id="Frete" name="Frete[]" type="text" value="CIF" size="10"></td>
                    <td width="10%"><input id="Qtde" name="Qtde[]" type="text" size="10"></td>
                    <td width="11%"><input id="VlrUnitVista" name="VlrUnitVista[]" type="text" size="10"></td>
                    <td width="6%"><input  id="VlrTotalVista" name="VlrTotalVista[]" type="text" size="10"></td>
                    <td width="8%"><input  id="VlrUnitPrazo[]" name="VlrUnitPrazo[]" type="text" size="10"></td>
                    <td width="8%"><input  id="VlrTotalPrazo[]"  name="VlrTotalPrazo[]" type="text" size="10"></td>                        
                    <td class="actions">
                       <button class="btn btn-large btn-danger btn-xs" onclick="RemoveTableRow(this)" type="button">Remover</button>
                   </td>
                 </tr>
              </tbody>
              <tfoot>
                 <tr>
                    <td colspan="11" style="text-align: left;">
                       <button class="btn btn-large btn-success" onclick="AddTableRow(this)" type="button">Adicionar Linha</button>
                    </td>
                 </tr>
              </tfoot>
           </table>
        </div>

A criação das linhas dinâmicas da tabela estão assim:

(function($) {
   
    RemoveTableRow = function(handler) {
      var tr = $(handler).closest('tr');
   
      tr.fadeOut(400, function(){ 
        tr.remove(); 
      }); 
   
      return false;
    };
    
    AddTableRow = function() {
        
        var newRow = $("<tr>");
        var cols = "";
        
		cols += '<td><input type="text" id="Produto" name="Produto[]" value="" size="10"></td>';
        cols += '<td><input type="text" id="Embalagem" name="Embalagem[]" size="10"></td>';
        cols += '<td><input type="text" id="Concorrencia" name="Concorrencia[]" size="10"></td>';
        cols += '<td><input type="text" id="Fonte" name="Fonte[]" size="10" value="Produtor"></td>';
        cols += '<td><input type="text" id="Frete" name="Frete[]" size="10" value="CIF"></td>';
		cols += '<td><input type="text" id="Qtde" name="Qtde[]" size="10"></td>';
        cols += '<td><input type="text" id="VlrUnitVista" name="VlrUnitVista[]" size="10"></td>';
        cols += '<td><input type="text" id="VlrTotalVista" name="VlrTotalVista[]" size="10"></td>';
        cols += '<td><input type="text" id="VlrUnitPrazo" name="VlrUnitPrazo[]" size="10"></td>';
        cols += '<td><input type="text" id="VlrTotalPrazo" name="VlrTotalPrazo[]" size="10"></td>';
        		
        
        cols += '<td class="actions">';
        cols += '<button class="btn btn-large btn-danger btn-xs" onclick="RemoveTableRow(this)" type="button">Remover</button>';
        cols += '</td>';
        
        newRow.append(cols);
        
        $("#products-table").append(newRow);
      
        return false;
    };
    
   })(jQuery);

E os cálculos estão sendo feitos usando isso:

	function id(el) {
	  return document.getElementById(el);
	}

	function total( Qtde, VlrUnitVista ) {
	  return parseFloat(Qtde.replace(',', '.'), 10) * parseFloat(VlrUnitVista.replace(',', '.'), 10);
	}

	window.onload = function() {
	  id('Qtde').addEventListener('keyup', function() {
		var result = total( this.value , id('VlrUnitVista').value );
		id('VlrTotalVista').value = String(result.toFixed(2)).formatMoney();
	  });

	  id('VlrUnitVista').addEventListener('keyup', function(){
		var result = total( id('Qtde').value , this.value );
		id('VlrTotalVista').value = String(result.toFixed(2)).formatMoney();
	  });
	}
	


	String.prototype.formatMoney = function() {
	  var v = this;

	  if(v.indexOf('.') === -1) {
		v = v.replace(/([\d]+)/, "$1,00");
	  }

	  v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
	  v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
	  v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");

	  return v;
	};

Estou postando a imagem do meu form, se ajudar.

inserir a descrição da imagem aqui

1 Resposta 1

1

Ao usar id nos campos, você irá duplicar os mesmos ids ao criar linhas dinâmicas. Além de ser errado (um id deve ser único na página) você não conseguirá pegar os valores dos campos. É preciso trocar todos os ids dos campos por class.

Outro ponto é: já que está usando jQuery, não faz sentido misturar JavaScript puro usando window.onload e addEventListener. Inclua os eventos keyup dentro da função (function($){.

O que eu fiz foi converter os eventos addEventListener em formato jQuery que irá capturar os valores nas linhas dinâmicas. Além disso, foi preciso criar um outro evento para os valores da coluna "A prazo":

$(document).on("keyup", ".Qtde", function(){
   var result = total( $(this).val() , $(this).closest("tr").find(".VlrUnitVista").val() );
   if(!isNaN(result)) $(this).closest("tr").find(".VlrTotalVista").val(String(result.toFixed(2)).formatMoney());
});

$(document).on("keyup", ".VlrUnitVista", function(){
   var result = total( $(this).closest("tr").find(".Qtde").val() , $(this).val() );
   if(!isNaN(result)) $(this).closest("tr").find(".VlrTotalVista").val(String(result.toFixed(2)).formatMoney());
});

$(document).on("keyup", ".VlrUnitPrazo", function(){
   var result = total( $(this).closest("tr").find(".Qtde").val() , $(this).val() );
   if(!isNaN(result)) $(this).closest("tr").find(".VlrTotalPrazo").val(String(result.toFixed(2)).formatMoney());
});

Então, o código ficou assim:

(function($) {
   
    RemoveTableRow = function(handler) {
      var tr = $(handler).closest('tr');
   
      tr.fadeOut(400, function(){ 
        tr.remove(); 
      }); 
   
      return false;
    };
    
    AddTableRow = function() {
        
        var newRow = $("<tr>");
        var cols = "";
        
		cols += '<td><input type="text" class="Produto" name="Produto[]" value="" size="10"></td>';
        cols += '<td><input type="text" class="Embalagem" name="Embalagem[]" size="10"></td>';
        cols += '<td><input type="text" class="Concorrencia" name="Concorrencia[]" size="10"></td>';
        cols += '<td><input type="text" class="Fonte" name="Fonte[]" size="10" value="Produtor"></td>';
        cols += '<td><input type="text" class="Frete" name="Frete[]" size="10" value="CIF"></td>';
		cols += '<td><input type="text" class="Qtde" name="Qtde[]" size="10"></td>';
        cols += '<td><input type="text" class="VlrUnitVista" name="VlrUnitVista[]" size="10"></td>';
        cols += '<td><input type="text" class="VlrTotalVista" name="VlrTotalVista[]" size="10"></td>';
        cols += '<td><input type="text" class="VlrUnitPrazo" name="VlrUnitPrazo[]" size="10"></td>';
        cols += '<td><input type="text" class="VlrTotalPrazo" name="VlrTotalPrazo[]" size="10"></td>';
        		
        
        cols += '<td class="actions">';
        cols += '<button class="btn btn-large btn-danger btn-xs" onclick="RemoveTableRow(this)" type="button">Remover</button>';
        cols += '</td>';
        
        newRow.append(cols);
        
        $("#products-table").append(newRow);
      
        return false;
    };

   $(document).on("keyup", ".Qtde", function(){
		var result = total( $(this).val() , $(this).closest("tr").find(".VlrUnitVista").val() );
		if(!isNaN(result)) $(this).closest("tr").find(".VlrTotalVista").val(String(result.toFixed(2)).formatMoney());
   });

   $(document).on("keyup", ".VlrUnitVista", function(){
		var result = total( $(this).closest("tr").find(".Qtde").val() , $(this).val() );
		if(!isNaN(result)) $(this).closest("tr").find(".VlrTotalVista").val(String(result.toFixed(2)).formatMoney());
   });

   $(document).on("keyup", ".VlrUnitPrazo", function(){
		var result = total( $(this).closest("tr").find(".Qtde").val() , $(this).val() );
		if(!isNaN(result)) $(this).closest("tr").find(".VlrTotalPrazo").val(String(result.toFixed(2)).formatMoney());
   });


})(jQuery);
   
   function id(el) {
	  return document.getElementById(el);
	}

	function total( Qtde, VlrUnitVista ) {
	  return parseFloat(Qtde.replace(',', '.'), 10) * parseFloat(VlrUnitVista.replace(',', '.'), 10);
	}


	String.prototype.formatMoney = function() {
	  var v = this;

	  if(v.indexOf('.') === -1) {
		v = v.replace(/([\d]+)/, "$1,00");
	  }

	  v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
	  v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
	  v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");

	  return v;
	};
table { 
   table-layout: fixed; 
   border-collapse: collapse; 
} 

th { 
   border: 1px solid #000; 
   font-family: Verdana, Arial, sans-serif; 
   font-size: 0.8em; 
   background-color: #009fef; 
   padding: 0px 5px 0px 5px; 
} 

td { 
   border: 1px solid #000; 
   font-family: Verdana, Arial, sans-serif; 
   font-size: 0.8em; 
   padding: 0px 5px 0px 5px; 
} 

.centro { 
   text-align: center; 
} 

.cinzaClaro { 
   background-color: #CACACA; 
} 

.cinzaEscuro { 
   background-color: #EBEBEB; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formulario" action="" method="post" >
     <div id="mensagem" class=""></div>

        <div class="table-responsive">
           <table width="100%" class="table table-hover table-bordered" id="products-table">
              <tbody>
                 <tr>
                     <th colspan="6" rowspan="2">&nbsp;</th>
                     <th colspan="4" class="actions">Unidade</th>
                     <th class="actions">&nbsp;</th>
                  </tr>
                 <tr>
                     <th colspan="2" class="actions">A vista</th>
                     <th colspan="2" class="actions">A prazo</th>
                     <th class="actions">&nbsp;</th>
                 </tr>
                 <tr>
                   <th width="12%">Produto</th>
                    <th width="12%">Embalagem</th>
                    <th width="12%">Concorrência</th>
                    <th width="10%">Fonte</th>
                    <th width="10%">Frete</th>
                    <th width="10%">Qtde</th>
                    <th colspan="2" class="actions">Unitário</th>
                    <th colspan="2" class="actions">Total</th>
                    <th width="18%" class="actions">Ações</th>
                 </tr>
                 <tr>
                    <td width="12%"><input class="Produto" name="Produto[]" type="text" size="10" ></td>                        
                    <td width="12%"><input class="Embalagem" name="Embalagem[]" type="text" size="10"></td>
                    <td width="12%"><input class="Concorrencia" name="Concorrencia[]" type="text" size="10"></td>
                    <td width="10%"><input class="Fonte" name="Fonte[]" type="text" value="Produtor" size="10"></td>
                    <td width="10%"><input class="Frete" name="Frete[]" type="text" value="CIF" size="10"></td>
                    <td width="10%"><input class="Qtde" name="Qtde[]" type="text" size="10"></td>
                    <td width="11%"><input class="VlrUnitVista" name="VlrUnitVista[]" type="text" size="10"></td>
                    <td width="6%"><input  class="VlrTotalVista" name="VlrTotalVista[]" type="text" size="10"></td>
                    <td width="8%"><input  class="VlrUnitPrazo" name="VlrUnitPrazo[]" type="text" size="10"></td>
                    <td width="8%"><input  class="VlrTotalPrazo"  name="VlrTotalPrazo[]" type="text" size="10"></td>                        
                    <td class="actions">
                       <button class="btn btn-large btn-danger btn-xs" onclick="RemoveTableRow(this)" type="button">Remover</button>
                   </td>
                 </tr>
              </tbody>
              <tfoot>
                 <tr>
                    <td colspan="11" style="text-align: left;">
                       <button class="btn btn-large btn-success" onclick="AddTableRow(this)" type="button">Adicionar Linha</button>
                    </td>
                 </tr>
              </tfoot>
           </table>
        </div>
   </div>
</form>

1
  • Fantástico @dvd, muitíssimo obrigado pelo excelente código. Commented 23/02/2018 às 14:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .