get the value of one<td> by clicking on a checkbox of the same line<tr> jquery

Question:

How do I get a value from a <td> when clicking on a checkbox that is in the same <tr> in

Here is my code:

HTML

   <table style="display:none;" id="tableTime">  
        <tr>    
    <td class="hora">08:00</td>
    <td class="eventoAgenda" id="0800"></td>
    <td class="idEvento" id="id0800"></td>
    <td class="statusVerde01"> <input id="iStatusVerde01" class="iStatusVerde" type="checkbox" style="width: 15px;" ></input> </td>
        </tr> 

        <tr>
    <td class="hora">08:30</td>
    <td class="eventoAgenda" id="0830"></td>
    <td class="idEvento" id="id0830"></td>
    <td class="statusVerde02"> <input id="iStatusVerde02" class="iStatusVerde" type="checkbox" style="width: 15px;"></input> </td>
        </tr>

jquery

$('.iStatusVerde').click(function() {  
           var teste = $('#tableTime tr td').parent().find(':nth-child(3)').html()
           console.log(teste);

I tried this way, but it only works with the value of the first line, and I have several other lines. In this example I'm trying to get the value from the third column.

Answer:

The problem is that you are getting all the table td's with the expression $('#tableTime tr td') . You should get tr from where the checkbox is, so use this . this represents the element referring to the event, for example the element you clicked (in this case it represents the checkbox )

Here are two examples of how you can do this:

 $('.iStatusVerde').click(function() { var teste = $(this) // $(this) representa o checkbox .parent() // Navega para o elemento pai (td) .parent() // Navega para o pai de td (tr) .find(':nth-child(3)') // Encontra o elemento do seletor .html(); // Retorna o html do elemento var teste2 = $(this) // Representa o elemento clicado (checkbox) .closest('tr') // Encontra o elemento pai do seletor mais próximo .find('td') // Encontra o elemento do seletor (todos os tds) .eq(1) // pega o segundo (contagem do eq inicia em 0) .text(); // Retorna o texto do elemento console.log(teste, teste2); });
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="tableTime"> <tr> <td class="hora">08:00</td> <td class="eventoAgenda" id="0800">11</td> <td class="idEvento" id="id0800">12</td> <td class="statusVerde01"> <input id="iStatusVerde01" class="iStatusVerde" type="checkbox" style="width: 15px;" /> </td> </tr> <tr> <td class="hora">08:30</td> <td class="eventoAgenda" id="0830">21</td> <td class="idEvento" id="id0830">22</td> <td class="statusVerde02"> <input id="iStatusVerde02" class="iStatusVerde" type="checkbox" style="width: 15px;" /> </td> </tr> </table>
Scroll to Top