3

Como faço para pegar um valor de uma <td> ao clicar em um checkbox que está na mesma <tr> em

Segue meu código:

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);

Tentei desta forma, porém só funciona com o valor da primeira linha, e tenho varias outras linhas. Neste exemplo estou tentando pegar o valor da terceira coluna.

3 Respostas 3

5

O problema é que você está pegando todos os td's da tabela com a expressão $('#tableTime tr td'). Você deve pegar o tr de onde o checkbox está, por isso utilize o this. O this representa o elemento referente ao evento, por exemplo, o elemento que você clicou (nesse caso ele representa o checkbox)

Aqui tem dois exemplos de como você pode fazer isso:

$('.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>

1
  • muito bom seu exemplo.. funcionou exatamente da forma que eu precisava.. valeu 19/01/2016 às 14:33
2

Utilize parent() e find() para navegar até o elemento pai e depois encontrar a classe .hora.

Exemplo:

$(".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>

1

Por que não coloca esse id na quarta TD também ?

Daí é só fazer usando closest.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .