0

Tenho esse script ele percorre a tabela e pega os valores. Mas teria como restringe mais pegando somente a linha que acionou o evento.

$(document).ready(function(){
$(document).on('change','table tbody tr td input',function(){
            
            var v = 0;
            
            $('input').each(function(i,e) {   
            
			if(i > 8)
			{
				return true;
			}
			
            if(i !== 2)
            {
                if ($(e).val())
				{
                  var i = $(e).val().replace(/\,/g,'.');
                  
                  if (isNaN(i)) { $(e).val(''); return; }
                      
                  v += parseFloat(i);
               
                  $('.total').val( v.toFixed(2));
            
                }
            }
            
            });
            
        });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>
VALOR 1
</th>
<th>
VALOR 2
</th>
<th>
TOTAL
</th>
</thead>
<tbody>
<tr>
<td>
<input type='text' name='name0' placeholder='' class='form-control'/>
</td>
<td>
<input type='text' name='name0' placeholder='' class='form-control'/>
</td>
<td>
<input type='text' name='name0' placeholder='' class='form-control total' disabled/>
</td>
</tr>
<tr>
<td>
<input type='text' name='name0' placeholder='' class='form-control'/>
</td>
<td>
<input type='text' name='name0' placeholder='' class='form-control'/>
</td>
<td>
<input type='text' name='name0' placeholder='' class='form-control total' disabled/>
</td>
</tr>
</tbody>
</table>

1
  • Podes usar $(this).closest('tr').find('input'). each etc em vêz de $('input'). each. É isso que procuras?
    – Sergio
    22/08/2017 às 20:05

1 Resposta 1

2

Respondendo a sua pergunta, tem como pegar na linha sim, basta ao invés de fazer a busca por todos inputs, procurar por um ancestral comum, no caso a tr, e depois fazer a busca pelos inputs a partir deste ancestral. Segue seu código alterado:

$(document).ready(function(){
$(document).on('change','table tbody tr td input',function(){
            
            var v = 0;
            
            $(this).closest('tr').find('input').each(function(i,e) {   
            
			if(i > 8)
			{
				return true;
			}
			
            if(i !== 2)
            {
                if ($(e).val())
				{
                  var i = $(e).val().replace(/\,/g,'.');
                  
                  if (isNaN(i)) { $(e).val(''); return; }
                      
                  v += parseFloat(i);
               
                  $(this).closest('tr').find('.total').val( v.toFixed(2));
            
                }
            }
            
            });
            
        });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>
VALOR 1
</th>
<th>
VALOR 2
</th>
<th>
TOTAL
</th>
</thead>
<tbody>
<tr>
<td>
<input type='text' name='name0' placeholder='' class='form-control'/>
</td>
<td>
<input type='text' name='name0' placeholder='' class='form-control'/>
</td>
<td>
<input type='text' name='name0' placeholder='' class='form-control total' disabled/>
</td>
</tr>
<tr>
<td>
<input type='text' name='name0' placeholder='' class='form-control'/>
</td>
<td>
<input type='text' name='name0' placeholder='' class='form-control'/>
</td>
<td>
<input type='text' name='name0' placeholder='' class='form-control total' disabled/>
</td>
</tr>
</tbody>
</table>

Detalhando a alteração $(this).closest('tr').find('input')...:

  • $(this): Retorna o elemento que acionou o evento onchange, no caso, um input.
  • closest('tr'): Procura o ancestral mais próximo que satisfaça o seletor, no caso apenas procurando pela tag tr.
  • find('input'): Procura pelo seletor por todos ancestrais dos objetos retornados na função anterior.

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 .