CODEWITHSUNDEEP
jqueryhtmljquery-selectors
David Felice
David Felice

Reputation: 5

Issue selecting inputs inside TD tags

I have a html like: 

<table id="table1">  
  <tr>  
    <td>TEXT</td>  
    <td><input type="number" value="1"></td>  
    <td><input type="number" value="2"></td>  
    <td><input type="button" class="go" value="go"></td>  
  </tr>  
  <tr>  
    <!-- same structure above -->  
  </tr>  
</table>

and I'm trying to target the inputs (type number), with Jquery.

I've tried two approaches:

#1: 

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td input:nth-child(2)').val();
});

and #2: 

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td:nth-child(2) input').val();
  g = $(this).closest('tr').find('td:nth-child(3) input').val();
});

In the first one, the value of 'g' is undefined ('p' is correct) and in the second one, 'p' is undefined ('g' is correct).

Can someone explain me why this is happening and I cannot get the right value for both variables? Thanks in advance!

Upvotes: 0

Views: 1961

Answers (3)

DinoMyte
DinoMyte

Reputation: 8858

nth-child basically means to find the nth-child in each qualifying matching criteria. Since you have find('td input:nth-child(2)') , which would mean that find the 2nd input occurrence in each td. Since each td only has 1 input, if would give you undefined.

I would recommend using .eq() selector which starts from zeroth index. 

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td input').eq(1).val();
});

Example : https://jsfiddle.net/DinoMyte/s51sayvc/1/

or 

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td').eq(2).find('input').val();
});

Example : https://jsfiddle.net/DinoMyte/s51sayvc/2/

Upvotes: 1

Damian Bartosik
Damian Bartosik

Reputation: 498

:nth-child() is counting elements from 0, so to get first element you have to type: :nth-child(0) (so it's the same as :first), for second element: :nth-child(1).

So the first approach would work fine with code:

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td input:nth-child(1)').val(); 
});

And for the second approach, it should look like that:

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td:nth-child(0) input').val();
  g = $(this).closest('tr').find('td:nth-child(1) input').val();
});

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You can use :eq() selector like following.

$('#table1').on('click', '.go', function () {
    var tr = $(this).closest('tr');
    var faixa = tr.find('td:first').text(),
    p = tr.find('td input:eq(0)').val(),
    g = tr.find('td input:eq(1)').val();

    console.log(faixa, p, g);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
    <tr>
        <td>TEXT</td>
        <td><input type="number" value="1"></td>
        <td><input type="number" value="2"></td>
        <td><input type="button" class="go" value="go"></td>
    </tr>
</table>

Upvotes: 0

Related Questions