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

Question

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

Follows 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 of the third column.

Answer 1

The problem is you’re getting all the td's table with the expression $('#tableTime tr td'). You must take the tr where the checkbox is, so use the this. The this represents the element referring to the event, for example, the element you clicked on (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>

Answer 2

Utilize parent() and find() to navigate to the parent element and then find the class .hora.

Example:

$(".iStatusVerde").click(function() {
  var valor = $(this).parent().parent().find('.hora');
  alert(valor.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="hora">08:00</td>
    <td>
      <input type="checkbox" class="iStatusVerde">
    </td>
  </tr>
  <tr>
    <td class="hora">08:30</td>
    <td>
      <input type="checkbox" class="iStatusVerde">
    </td>
  </tr>
</table>

Answer 3

Why don’t you put that id in the fourth TD also ?

Then just do it using closest.

$('.iStatusVerde').click(function() {  
    var teste = $(this).closest('td').attr('id');
    console.log(teste);