Come accedere alla cella specifica della riga della tabella selezionata in javascript

Question

Ho una tabella HTML popolata dal database. E una funzione jquery che aggiunge un evento click client a ogni riga della tabella.

$(function() { 
    $(".TreeTable tr").each(function(index) { 
     $(this).click(function() { 
      alert($(this).text()); 
     }); 
    }); 
}); 

Ora sono in grado di ottenere valori di riga completi facendo clic su qualsiasi riga. Ora ho bisogno di accedere al valore della singola cella in quella funzione. Qualcuno può dirmi come ottengo il valore di una singola cella sul clic di riga.

Answer 1

Date un'occhiata a questo:

$(document).ready(function(){ 
    $('.TreeTable tr').click(function(e){ 
     var cell = $(e.target).get(0); // This is the TD you clicked 
     var tr = $(this); // This is the TR you clicked 
     $('#out').empty(); 
     $('td', tr).each(function(i, td){ 
      $('#out').html(
       $('#out').html() 
       +'<br>' 
       +i+': '+$(td).text() 
       + (td===cell?' [clicked]':'')); 
     }); 
    }); 
}); 

Ecco il codice di lavoro: http://jsfiddle.net/VbA9D/

Nel caso in cui si dispone di altri elementi HTML all'interno delle celle della tabella su cui si potrebbe fare clic, l'esempio che segue lavorare meglio:

$(document).ready(function(){ 
    $('.TreeTable tr').click(function(e){ 
     var cell = $(e.target).get(0); // This is the TD you clicked 
     if(cell.nodeName != 'TD') 
      cell = $(cell).closest('td').get(0); 
     var tr = $(this); // This is the TR you clicked 
     $('#out').empty(); 
     $('td', tr).each(function(i, td){ 
      $('#out').html(
       $('#out').html() 
       +'<br>' 
       +i+': '+$(td).text() 
       + (td===cell?' [clicked]':'')); 
     }); 
    }); 
}); 

E qui è il codice è possibile verificare:

http://jsfiddle.net/7PWu5/

Answer 2

È possibile ottenere la seconda cella utilizzando

alert($('td', this).eq(1).text()); 

Di solito, un codice più affidabile, si preferisce aggiungere una classe per il tuo cellulare desiderata, in modo che è possibile utilizzare

alert($('td.myclass', this).text()); 

Se quello che vuoi è quello di ottenere la cellula che è stato fatto clic, semplicemente legare l'evento alla cella:

$(".TreeTable td").click(function() { // td not tr 
    alert($(this).text()); 
}); 

Si noti che è inutile eseguire il loop su una raccolta jQuery per associare un evento, come si può vedere dal mio ultimo codice.

Answer 3

Innanzitutto, non è necessario il .each - il metodo .click si collegherà a ogni elemento passato, non solo al primo.

In secondo luogo, c'è una proprietà specifiche chiamati cells su elementi di riga della tabella che consente di accedere direttamente alle cellule del fila:

$('.TreeTable').on('click', 'tr', function() { 
    var td = this.cells[0]; // the first <td> 
    alert($(td).text()); 
}); 

Nota l'uso della delega evento - il gestore di eventi è effettivamente registrata su tutto il tavolo, e quindi fa affidamento sul bubbling degli eventi per dirvi quale riga è stata cliccata (e da quella ottenere il testo della cella).

Answer 4

preferisco questo:

$('.TreeTable').on('click', 'td', function() { // td not tr 
    alert($(this).text()); 
}); 

Answer 5

Non è necessario per scorrere in modo esplicito utilizzando .each() per legare i gestori di eventi per un insieme di elementi, funzioni leganti l'evento sarà implicitamente farlo per voi. A causa della propagazione degli eventi, è possibile associare un gestore di eventi per il <tr> e utilizzare event.target (l'elemento di origine) per ottenere un riferimento all'elemento che è stato effettivamente cliccato (il <td>):

$(function() { 
    $('.TreeTable tr').click(function(event) { 
     console.log(this); // the <tr> 
     console.log(event.target); // the <td> 
    }); 
}); 

Che si sta assumendo' re interessato allo specifico elemento <td> su cui è stato fatto clic.