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

问题

I have the following HTML in a JSP file:

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

I need to be able to trigger a 'click' event on each of the dynamically created <tr> tags and also be able to access the values of the <td> tags (of the clicked <tr>) from within the JavaScript function. I have this function already, but sadly it doesn't seem to be working.

$(document).ready(function() {
    $("div.custList > table > tr").live('click', function() {
        alert("You clicked my <tr>!");
        //get <td> 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.

回答1:

Unless otherwise definied (<tfoot>, <thead>), browsers put <tr> implicitly in a <tbody>.

You need to put a > tbody in between > table and > tr:

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

Alternatively, you can also be less strict in selecting the rows (the > denotes the immediate child):

$("div.custList table tr")

---

That said, you can get the immediate <td> children there by $(this).children('td').

回答2:

Try jQuery's delegate() function, like so:

$(document).ready(function(){
    $("div.custList table").delegate('tr', 'click', function() {
        alert("You clicked my <tr>!");
        //get <td> 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.

回答3:

This work for me!

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

回答4:

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 <td>!" + $(this).html() + 
              "My TR is:" + $(this).parent("tr").html());
        //get <td> element values here!!??
    });
});​

回答5:

$(this).find('td') will give you an array of td's in the tr.

回答6:

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

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

回答7:

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

来源：https://stackoverflow.com/questions/3458571/jquery-click-event-on-tr-elements-with-in-a-table-and-getting-td-element-v