Operations with multiple input js

1

I'm developing a system and in a certain part it has the following structure, image below

Followthecode

WhatIwanttodoiswhentheusertypesinthe"Braces" field and in the field "Weight" he makes an account and returns the value in the field "Total Prod."

But this in each line, as shown below:

Itriedtodothis,codebelow:

$(document).ready(function(){$(document).on('change','.peso',function(){varv=$(this).val();varc=$(".bracas").val();

    $(".total_prod").val(v*c);
  });
});

However, all the fields "Total Prod." is filled in.

Could you please help me with this?

    
asked by anonymous 29.09.2017 / 16:25

3 answers

0

Search for "Total Prod" according to this

$(document).ready(function(){

  $(document).on('change', '.peso', function() {
    var v = $(this).val();
    var c = $(".bracas").val();

    $(this).closest('tr').find(".total_prod").val(v*c);
  });
});

(I have not tested it but likely to)

    
29.09.2017 / 16:33
1

A suggestion follows without depending on jQuery.:

// O objetivo do objeto Linha é criar um scope para os elementos da pagina.
var Linha = function (linha) {
  this.linha = linha;
  // os seletores abaixo irão buscar os elementos DOM apenas dentro da tr "linha"
  this.situacao = this.linha.querySelector("name='situacao'");
  this.matricula = this.linha.querySelector("name=^'matricula'");
  this.bracas = this.linha.querySelector("name=^'bracas'");
  this.peso = this.linha.querySelector("name=^'peso'");
  this.total_prod = this.linha.querySelector("name=^'total_prod'");
  this.total_pago = this.linha.querySelector("name=^'total_pago'");

  //realizando o bind do método "onChange" para os elementos do "DOM".
  //o bind(this) serve para que o "this" no evento seja o objeto Linha e não o elemento DOM em si.
  this.bracas.addEventListener("input", this.onChange.bind(this));
  this.peso.addEventListener("input", this.onChange.bind(this));
}

//definindo o evento onChange no prototype da Linha, para evitar que a mesma seja declarada a cada vez que o objeto Linha seja instanciado.
Linha.prototype.onChange = function () {
  var bracas = parseInt(this.bracas.value) || 0;
  var peso = parseInt(this.peso.value) || 0;
  this.total_prod.value = bracas * peso;
}

//percorrendo todas as linhas da tabela e criando um escopo para cada uma delas.
var linhas = [].forEach.map(document.querySelectorAll(".table tbody tr"), function (linha) {
  return new Linha(linha);
});

Now with jQuery ...

$(document).on('change', '.bracas, .peso', function() {
  // buscando a linha mais próxima para utiliza-la como escopo.
  var l = $(this).parent('tr');
  var v = $(".peso", l).val();
  var c = $(".bracas", l).val();
  $(".total_prod", l).val(v*c);
});
    
29.09.2017 / 16:42
0

Exchange

$(".total_prod").val(v*c);

By

$(this).parents("tr").find(".total_prod").val(v*c);
    
29.09.2017 / 16:33