jQuery - Haga clic evento en <tr> elementos con una mesa y conseguir <td> elemento valora

Question

tengo el siguiente código HTML en un archivo 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> 

tengo que ser capaz de desencadenar un evento 'click' en cada una de las creado dinámicamente etiquetas <tr> y también poder acceder a los valores de las etiquetas <td> (del <tr> cliqueado) desde la función de JavaScript. Ya tengo esta función, pero lamentablemente no parece estar funcionando.

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

---

actualización (enero 2016): jQuery.live es obsoleto (como se ha señalado aquí: http://api.jquery.com/live/)

A partir de jQuery 1.7, es obsoleto método de la .live(). Utilice .on() para adjuntar controladores de eventos.

Answer 1

A menos que de otro modo definied (<tfoot>, <thead>), navegadores ponen <tr> implícitamente en un <tbody>.

Es necesario poner un > tbody entre > table y > tr:

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

Alternativamente, también puede ser menos estricto en la selección de las filas (la > denota el inmediata niño):

$("div.custList table tr") 

---

Dicho esto, puede obtener elinmediatoniños allí por $(this).children('td').

Answer 2

$(this).find('td') le dará una variedad de td en el tr.

Answer 3

Pruebe la función de jQuery delegate(), así:

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

Un delegado funciona de la misma manera que live() excepto que live() no puede aplicarse a los elementos encadenados, mientras que delegate() le permite especificar un elemento dentro de un elemento de guiarse por.

Answer 4

Como los elementos TR envuelven los elementos TD, en realidad lo que está haciendo clic es en el TD (que luego sube hasta el TR) para simplificar su selector. Obtención de los valores es más fácil de esta manera también, el TD hecho clic es esto, el TR que lo envuelve es this.parent

cambiar su código javascript para lo siguiente:

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

Este ¡trabaja para mi!

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