get the value of a td when clicking on a checkbox of the same line tr jquery

Navigation
2
How do I get a value of a <td> by clicking a checkbox that is in the same <tr> in jquery

Follow 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.

    
asked by anonymous 19.01.2016 / 05:38

3 answers

4

The problem is that you are catching all td's of the table with the expression $('#tableTime tr td') . You should get the tr where the checkbox is, so use this . The this represents the element for 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><tableid="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>
    
19.01.2016 / 12:04
1

Why do not you put this id in the fourth TD too?

Then just do it using closest . 

$('.iStatusVerde').click(function() {  
    var teste = $(this).closest('td').attr('id');
    console.log(teste);
    
19.01.2016 / 11:29
1

Use 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><tdclass="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>
    
19.01.2016 / 12:09
Duvida typedef void * [duplicate] Subqueries with SELECT statement in Sqlite