1

Estou desenvolvendo um sistema e numa determinada parte ele apresenta a seguinte estrutura, imagem abaixo Imagem

Segue também o código

inserir a descrição da imagem aqui

O que eu quero fazer é quando o usuário digitar no campo "Braças" e no campo "Peso" ele efetue uma conta e retorna o valor no campo "Total Prod."

Porem isso em cada linha, ficando conforme imagem abaixo:

inserir a descrição da imagem aqui

Tentei fazer dessa forma, código abaixo:

$(document).ready(function(){

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

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

Porém, dassa forma todos os campos "Total Prod." é preenchido.

Poderia me dar uma ajuda com isso?

2
  • De preferência coloque o código escrito, não através de imagem. Commented 29/09/2017 às 14:49
  • Ok, irei me atentar da próxima vez. Obrigado!
    – Weslley
    Commented 29/09/2017 às 14:50

3 Respostas 3

1

segue uma sugestão sem depender do 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);
});

agora com 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);
});
0

Procure por "Total Prod" de acordo com o 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);
  });
});

(Não testei mas provável que de certo)

1
  • Obrigado, resolveu meu problema!
    – Weslley
    Commented 29/09/2017 às 14:50
0

Troca

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

Por

$(this).parents("tr").find(".total_prod").val(v*c);
1
  • Obrigado, resolveu meu problema!
    – Weslley
    Commented 29/09/2017 às 14:50

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 .