jQuery - Clicca evento <tr> elementi con un tavolo e ottenere <td> elemento Valori

Question

ho il seguente codice HTML in un file JSP:

<div class="custList"> 
    <table class="dataGrid"> 
     <c:forEach var="cust" items="${custList}"> 
     <tr> 
      <td>${cust.number}</td> 
      <td>${cust.description}</td> 
      <td>${cust.type}</td> 
      <td>${cust.status}</td> 
     </tr> 
    </c:forEach> 
    </table> 
</div> 

ho bisogno di essere in grado di innescare un evento 'click' su ciascuno dei creare dinamicamente i tag <tr> e anche essere in grado di accedere ai valori dei tag <td> (del numero selezionato <tr>) all'interno della funzione JavaScript. Ho già questa funzione, ma purtroppo non sembra funzionare.

$(document).ready(function() { 
    $("div.custList > table > tr").live('click', function() { 
     alert("You clicked my <tr>!"); 
     //get <td> element values here!!?? 
    }); 
}); 

---

Update (gennaio 2016): jQuery.live è deprecato (come indicato qui: http://api.jquery.com/live/)

Come di jQuery 1.7, il metodo .Live() è sconsigliata. Utilizzare .on() per allegare gestori di eventi.

Answer 1

Salvo diversamente definied (<tfoot>, <thead>), i browser messo <tr>implicitamente in un <tbody>.

è necessario mettere un > tbody tra > table e > tr:

$("div.custList > table > tbody > tr") 

In alternativa, si può anche essere meno severa nella selezione delle righe (il > denota il immediato bambino):

$("div.custList table tr") 

---

Detto questo, è possibile ottenere l'immediato <td> bambini lì per $(this).children('td').

Answer 2

$(this).find('td') vi darà una serie di td nel tr.

Answer 3

Prova la funzione di jQuery delegate(), in questo modo:

$(document).ready(function(){ 
    $("div.custList table").delegate('tr', 'click', function() { 
     alert("You clicked my <tr>!"); 
     //get <td> element values here!!?? 
    }); 
}); 

Un delegato funziona allo stesso modo di live() tranne che live() non può essere applicato agli elementi incatenati, mentre delegate() consente di specificare un elemento all'interno di un elemento di agire.

Answer 4

Poiché gli elementi TR avvolgono gli elementi TD, ciò che si sta effettivamente facendo clic è TD (quindi bolle fino al TR) in modo da semplificare il selettore. Ottenere i valori è più facile in questo modo anche il TD cliccato è questo, il TR che avvolge è this.parent

Modificare il codice javascript per il seguente:

$(document).ready(function() { 
    $(".dataGrid td").click(function() { 
     alert("You clicked my <td>!" + $(this).html() + 
       "My TR is:" + $(this).parent("tr").html()); 
     //get <td> element values here!!?? 
    }); 
});​ 

Answer 5

<script> 
jQuery(document).ready(function() { 
    jQuery("tr").click(function(){ 
     alert("Click! "+ jQuery(this).find('td').html()); 
    }); 
}); 
</script> 

Answer 6

$("body").on("click", "#tableid tr", function() { 
    debugger 
    alert($(this).text()); 
}); 

$("body").on("click", "#tableid td", function() { 
    debugger 
    alert($(this).text()); 
}); 

Answer 7

Questo lavora per me!

$(document).ready(function() { 
    $(document).on("click", "#tableId tbody tr", function() { 
     //some think 
    }); 
});