jQuery - Click event on tr elements with in a table and getting td element values

Question

I have the following HTML in a JSP file    lt div class  custList  gt      lt table class  dataGrid  gt         lt c forEach var  cust  items    custList   gt            lt tr gt               lt td gt   cust number  lt  td gt               lt td gt   cust description  lt  td gt               lt td gt   cust type  lt  td gt               lt td gt   cust status  lt  td gt           lt  tr gt        lt  c forEach gt     lt  table gt   lt  div gt    I need to be able to trigger a  click  event on each of the dynamically created  lt tr gt  tags and also be able to access the values of the  lt td gt  tags  of the clicked  lt tr gt   from within the JavaScript function  I have this function already  but sadly it doesn t seem to be working     document  ready function            div custList  gt  table  gt  tr   live  click   function             alert  You clicked my  lt tr gt                get  lt td gt  element values here                     Update  Jan 2016   jQuery live is deprecated  as noted here http   api jquery com live        As of jQuery 1 7  the  live   method is deprecated  Use  on   to   attach event handlers

User · Answer

Since TR elements wrap the TD elements  what you re actually clicking is the TD  it then bubbles up to the TR  so you can simplify your selector  Getting the values is easier this way too  the clicked TD is this  the TR that wraps it is this parent  Change your javascript code to the following      document  ready function             dataGrid td   click function             alert  You clicked my  lt td gt        this  html                     My TR is       this  parent  tr   html               get  lt td gt  element values here

User · Answer

this  find  td   will give you an array of td s in the tr

User · Answer

body   on  click     tableid tr   function          debugger     alert   this  text             body   on  click     tableid td   function          debugger     alert   this  text

User · Answer

Try jQuery s delegate   function  like so     document  ready function           div custList table   delegate  tr    click   function             alert  You clicked my  lt tr gt                get  lt td gt  element values here                   A delegate works in the same way as live   except that live   cannot be applied to chained items  whereas delegate   allows you to specify an element within an element to act on

User · Answer

lt script gt  jQuery document  ready function         jQuery  tr   click function           alert  Click     jQuery this  find  td   html                  lt  script gt

User · Answer

This work for me     document  ready function           document  on  click     tableId tbody tr   function               some think

User · Answer

Unless otherwise definied   lt tfoot gt    lt thead gt    browsers put  lt tr gt  implicitly in a  lt tbody gt    You need to put a  gt  tbody in between  gt  table and  gt  tr      div custList  gt  table  gt  tbody  gt  tr     Alternatively  you can also be less strict in selecting the rows  the  gt  denotes the immediate child       div custList table tr       That said  you can get the immediate  lt td gt  children there by   this  children  td

[javascript] jQuery - Click event on <tr> elements with in a table and getting <td> element values

Examples related to javascript

Examples related to jquery

Examples related to jquery-selectors