web-dev-qa-db-fra.com

jQuery - Cliquez sur l'événement sur les éléments <tr> avec dans une table et obtenez les valeurs des éléments <td>

J'ai le code HTML suivant dans un fichier 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>

Je dois pouvoir déclencher un événement 'click' Sur chacune des balises <tr> Créées dynamiquement et également pouvoir accéder aux valeurs des balises <td> (Des clics <tr>) Depuis la fonction JavaScript. J'ai déjà cette fonction, mais malheureusement elle ne semble pas fonctionner.

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

Mise à jour (janvier 2016) : jQuery.live est déconseillé (comme indiqué ici: http://api.jquery.com/live/ )

Depuis jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher des gestionnaires d'événements.

javascriptjqueryjquery-selectors
34
Randall Kwiatkowski

Sauf indication contraire (<tfoot>, <thead>), Les navigateurs mettent <tr> implicitement dans un <tbody>.

Vous devez mettre un > tbody Entre > table Et > tr:

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

Alternativement, vous pouvez également être moins strict dans la sélection des lignes (le > Désigne l'enfant immédiat ):

$("div.custList table tr")

Cela dit, vous pouvez y obtenir les enfants <td> Immédiats en $(this).children('td') .

37
BalusC

Essayez la fonction delegate() de jQuery, comme ceci:

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

Un délégué fonctionne de la même manière que live() sauf que live() ne peut pas être appliqué aux éléments chaînés, tandis que delegate() vous permet de spécifier un élément dans un élément pour agir sur.

18
SimonDowdles

Ce travail pour moi!

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

Étant donné que les éléments TR enveloppent les éléments TD, ce que vous cliquez réellement est le TD (il bouillonne ensuite jusqu'au TR) afin que vous puissiez simplifier votre sélecteur . Obtenir les valeurs est plus facile de cette façon aussi, le clic TD est ceci, le TR qui l'enveloppe est this.parent

Modifiez votre code javascript comme suit:

$(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!!??
    });
});​
4
JKirchartz

$(this).find('td') vous donnera un tableau de td dans le tr.

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

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