jQuery - < tr>上的Click事件表格中的元素并获得< td>元素值 [英] jQuery - Click event on <tr> elements with in a table and getting <td> element values

问题描述

我在 JSP 文件中包含以下HTML：

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>

我需要能够触发'点击'< tr> 标记上的$ c>事件，并且还能够访问< td> 标签（点击的< tr> ）。我已经有了这个功能，但遗憾的是它似乎没有用。

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!!??
    });
});

---

更新（2016年1月）：不推荐使用jQuery.live（如下所示： http://api.jquery.com/live/ ）

---

Update (Jan 2016): jQuery.live is deprecated (as noted here:http://api.jquery.com/live/)

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）到
附加事件处理程序。

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

推荐答案

除非另有说明（< tfoot> ，< thead> ），浏览器点击< tr> 隐含 < tbody> 。

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

您需要输入> >之间的tbody 表格和> 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")

---

那说，你可以通过 <$ c，立即获取< td> 儿童$ c> $（this）.children（'td'） 。

---

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

这篇关于jQuery - < tr>上的Click事件表格中的元素并获得< td>元素值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！