Get the value of a table row

Question

Get the value of a table row

Navigation

#1 by (2 votes)

0

I have this script it traverses the table and takes the values. But it would have more restricts 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

asked by anonymous 22.08.2017 / 22:03

1 answer

Total Input radio PHP TEF communication

score 2 · Answer 1

Answering your question, you have to pick up the line, yes, instead of searching for all inputs, look for a common ancestor, in this case the tr , and then search for the inputs from this ancestor . Here's your 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 this case an input.
closest('tr') : Searches for the nearest ancestor that satisfies the selector, in this case just looking for the tr tag.
find('input') : Searches for the selector by all ancestors of objects returned in the previous function.