Take the value of a table row

Asked

Viewed 639 times

0

I have this script he goes through the table and picks up the values. But it would be more restrictive taking only the line that triggered the event.

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

jquery

  • You can use $(this).closest('tr').find('input'). each etc in time of $('input'). each. That’s what you’re looking for?

1 answer

2

Answering your question, you can pick up the line yes, instead of searching for all inputs, looking for a common ancestor, in case the tr, and then search for inputs from this ancestor. It follows its changed code:

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

Detailing the change $(this).closest('tr').find('input')...:

  • $(this): Returns the element that triggered the event onchange, in case, an input.
  • closest('tr'): Find the nearest ancestor that satisfies the selector, in case just by looking for the tag tr.
  • find('input'): Search for the selector for all the ancestors of the returned objects in the previous function.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.