Comment puis-je obtenir la valeur du dernier th?

Question

Je dois imprimer le mot Emails en cliquant sur toutes les cases à cocher. Comment puis je faire ça? Voici ma structure HTML:

$('td input').on('change', function() { 
 
    var header_name = $(this).closests('tr').sibilings('th').last().text(); 
 
    console.log(header_name); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes"></th> 
 
     <th>Emails</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="email"></td> 
 
     <td>email</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="gmail"></td> 
 
     <td>gmail</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="aol"></td> 
 
     <td>aol</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="chmail"></td> 
 
     <td>chmail</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

Tout d'abord vous avez quelques fautes de frappe. closests() doit être closest() et sibilings() doit être siblings().

Le problème en lui-même est dû au fait que votre traversée DOM n'est pas correcte. Vous essayez de regarder frère th du parent tr au input cliqué, lorsque le th que vous visez est dans une ligne complètement différente.

Pour résoudre ce problème, vous devez utiliser closest() pour obtenir le table, puis find() le tr:last, comme ceci:

$('td input').on('change', function() { 
 
    var header_name = $(this).closest('table').find('th:last').text(); 
 
    console.log(header_name); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes"></th> 
 
     <th>Emails</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="email"></td> 
 
     <td>email</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="gmail"></td> 
 
     <td>gmail</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="aol"></td> 
 
     <td>aol</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" data-id="chmail"></td> 
 
     <td>chmail</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
    <tbody> 
     <tr> 
      <th><input type="checkbox" class="all_checkboxes"></th> 
      <th>Emails</th> 
     </tr> 
     <tr> 
      <td><input type="checkbox" data-id="email"></td> 
      <td>email</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" data-id="gmail"></td> 
      <td>gmail</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" data-id="aol"></td> 
      <td>aol</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" data-id="chmail"></td> 
      <td>chmail</td> 
     </tr> 
    </tbody>  
</table> 
<script> 
    $('td input, th input').on('change', function(){ 
     var header_name = $("tr:first").last().text(); 
     console.log(header_name); 
    }) 
</script>