2

Tenho uma tabela com dois campos: "Valor do Produto" e "Preço de venda". Mais outro campo para definir um calculo para o "preço de venda". A função só funciona para a primeira linha da tabela. Gostaria de saber como fazer para o calculo ser aplicado em todas as linhas no campo preço de venda.

function fctprecovenda(form) {
  var valprod =     parseFloat(form1.valprod.value);
  var percentual =  parseFloat(form1.percentual.value);
  var precovenda = (valprod + percentual * valprod / 100);    
  form1.prcvenda.value = precovenda.toFixed(2);
}
<form method="post" id="form1">
  <label >Definer valor %</label>
  <input type="text" name="percentual" value="" onblur="fctprecovenda(form1)">
  <table id ="tabvenda" nome ="tabvenda">
    <tr>
      <th>Valor do Produto<th>
      <th>Preço de venda<th>
    </tr>
    <tr>
      <td><input type="text" name="valprod" value="50"></td>
      <td><input type="text" name="prcvenda" value=""></td>   
    </tr>
    <tr>
      <td><input type="text" name="valprod" value="100"></td>
      <td><input type="text" name="prcvenda" value=""></td>   
    </tr>
  </table>
</form>

3 Respostas 3

3

Uma solução com jQuery seria:

$('[name="percentual"]').on('keyup', function() {
  var percentual = $(this).val();

  if ($.isNumeric(percentual)) {
    $('#tabvenda tbody tr').each(function() {
      var valprod = $(this).find('[name="valprod"]').val();
      var precovenda = (valprod + percentual * valprod / 100);

      $(this).find('[name="prcvenda"]').val(precovenda);
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="form1">
  <label>Definer valor %</label>
  <input type="text" name="percentual" value="">
  <table id="tabvenda" nome="tabvenda">
    <thead>
      <tr>
        <th>Valor do Produto</th>
        <th>Preço de Venda</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="text" name="valprod" value="50">
        </td>
        <td>
          <input type="text" name="prcvenda" value="">
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" name="valprod" value="100">
        </td>
        <td>
          <input type="text" name="prcvenda" value="">
        </td>
      </tr>
    </tbody>
  </table>
</form>

5
  • Vmartins, muito Obrigado, funcionou exatamente como precisava. Só mudei a formula que calculava para var precovenda = Number(valprod) + ( Number(valprod) * Number(percentual) / 100);
    – GiaN
    Commented 10/06/2016 às 16:50
  • vmartins, surgiu uma dúvida. Como faço para a função fazer o calculo no momento em que clicar em um botão?
    – GiaN
    Commented 10/06/2016 às 18:51
  • Fazer o cálculo em todas as linhas da tabela? Se for isso, basta alterar o evento (definido pela primeira linha do JS): $(seletor).on('click', function() {
    – vmartins
    Commented 10/06/2016 às 18:54
  • Pouco código e muito funcional, parabéns. Commented 10/06/2016 às 23:06
  • Obrigado novamente. A dúvida está resolvida.
    – GiaN
    Commented 13/06/2016 às 3:08
2
function fctprecovenda(form) {
var table = document.getElementById('tabvenda');
var percentual =  parseFloat(form1.percentual.value);

for ( var i = 0; i < table.rows.length; i++ ) {
    var valprod = 0;
    var linhaTable = table.rows[i];
    for (var colunas in linhaTable.children){
        coluna = linhaTable.children[colunas];
        for(var campos in coluna.children){
            campo = coluna.children[campos];
            if(campo.name==='valprod'){
                valprod=campo.value;
                console.log(valprod);
            } else if(campo.name==='prcvenda'){
                campo.value=Number(valprod) + ( Number(valprod) * Number(percentual) / 100);
            }
        }            
    }
}

}

1
  • Obrigado Victor, ajudou bastante.
    – GiaN
    Commented 10/06/2016 às 16:53
2

Segue mais uma implementação.

var percentual = document.querySelector("[name='percentual']");
var tabvenda = document.getElementById("tabvenda");
var linhas = tabvenda.querySelectorAll("tbody tr");
var formater = Intl.NumberFormat('pt-BR', {
  minimumFractionDigits: 2
});
var onInputChange = function (input) {
  var val = {};
  val.valprod = parseFloat(input.valprod.value);
  val.percentual = parseFloat(percentual.value);
  val.precovenda = (val.valprod + val.percentual * val.valprod / 100) || 0;
  input.prcvenda.value = formater.format(val.precovenda);
}

var inputs = [];
[].forEach.call(linhas, function (linha, indice) {
  var input = {
    valprod: linha.querySelector("[name='valprod']"),
    prcvenda: linha.querySelector("[name='prcvenda']")
  };
  input.valprod.addEventListener("input", function (event) {
    onInputChange(input);
  });
  inputs.push(input);
});
percentual.addEventListener("input", function (event) {
  inputs.forEach(onInputChange)
});
<form method="post" id="form1">
  <label >Definer valor %</label>
  <input type="text" name="percentual" value="">
  <table id="tabvenda" name="tabvenda">
    <thead>
      <tr>
        <th>Valor do Produto<th>
        <th>Preço de venda<th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="valprod" value="50"></td>
        <td><input type="text" name="prcvenda" value=""></td>   
      </tr>
      <tr>
        <td><input type="text" name="valprod" value="100"></td>
        <td><input type="text" name="prcvenda" value=""></td>   
      </tr>
    </tbody>
  </table>

</form>

1
  • TobyMosque, muito Obrigado. As 3 respostas funcionaram muito bem, acabei utilizando a do Vmartins.
    – GiaN
    Commented 10/06/2016 às 16:54

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 .