Jak uzyskać dostęp do określonej komórki klikniętego wiersza tabeli w javascript

Question

Mam tabelę HTML zapełnioną z bazy danych. I funkcja jquery, która dodaje zdarzenie click klienta do każdego wiersza tabeli.

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

Teraz mogę uzyskać kompletne wartości wierszy, klikając dowolny wiersz. Teraz potrzebuję uzyskać dostęp do wartości pojedynczej komórki w tej funkcji. Czy ktoś może mi powiedzieć, w jaki sposób uzyskać indywidualną wartość komórki po kliknięciu przez wiersz.

Answer 1

Spójrz na to:

$(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]':'')); 
     }); 
    }); 
}); 

Oto kod roboczych: http://jsfiddle.net/VbA9D/

W przypadku masz inne elementy HTML wewnątrz komórek tabeli, na których można kliknąć, poniższy przykład będzie działać lepiej:

$(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]':'')); 
     }); 
    }); 
}); 

A oto kod można Test:

http://jsfiddle.net/7PWu5/

Answer 2

można dostać drugą komórkę za pomocą

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

Zazwyczaj bardziej niezawodnego kodu, to wolisz, aby dodać klasę do wybranej komórki, dzięki czemu można używać

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

Jeśli to, co chcesz, aby uzyskać komórki, który został kliknięty, po prostu powiązać zdarzenie na komórkę:

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

Zauważ, że nie ma sensu pętla nad kolekcją jQuery, aby powiązać zdarzenie, jak widać z mojego ostatniego kodu.

Answer 3

Po pierwsze, nie ma potrzeby stosowania metody - metoda będzie wiązać się z każdym przekazanym elementem, a nie tylko z pierwszym.

Po drugie, istnieje szczególne właściwości nazywane cells na elementach wiersz tabeli, które daje bezpośredni dostęp do komórki wiersza to:

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

Zauważ użycie delegacji zdarzeń - program obsługi zdarzeń jest faktycznie zarejestrowana na całej tabeli, a następnie opiera się na bulgotaniu zdarzeń, aby powiedzieć, który wiersz został kliknięty (i z którego uzyskuje się tekst komórki).

Answer 4

Wolę to:

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

Answer 5

Nie trzeba jawnie iteracji za pomocą .each() związać obsługi zdarzeń do zestawu elementów, funkcje wiążące imprezy będzie niejawnie zrobić to za Ciebie. Ze względu na propagację zdarzenia, można powiązać obsługi zdarzeń do <tr> i używać event.target (komponent pochodzący), aby uzyskać referencję do elementu, który został faktycznie kliknął (na <td>):

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

to zakładając you” zainteresował się konkretnym klikniętym elementem <td>.