Calculating in Table Fields with JS

Question

I have a table with two fields: "Product Value" and "Sale Price". Another field to define a calculation for the "Sale Price". The function only works for the first row of the table. I would like to know how to make the calculation to be applied on all lines in the sales price field.

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>

Answer 1

A solution with jQuery would be:

$('[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>

Answer 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);
            }
        }            
    }
}

}

Answer 3

Follow one more implementation.

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>