jQuery - 在表格中的 <tr> 元素上单击事件并获取 <td> 元素值

【问题标题】：jQuery - Click event on <tr> elements with in a table and getting <td> element valuesjQuery - 在表格中的 <tr> 元素上单击事件并获取 <td> 元素值
【发布时间】：2011-03-28 09:05:20
【问题描述】：

我在 JSP 文件中有以下 HTML：

<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> 标记上触发 'click' 事件，并且还能够从JavaScript 函数。我已经有了这个功能，但遗憾的是它似乎不起作用。

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

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

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案1】：

除非另有定义（<tfoot>、<thead>），浏览器会将<tr>隐式放在<tbody>中。

您需要在> table 和> tr 之间添加一个> tbody：

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

或者，您也可以在选择行时不那么严格（> 表示立即子级）：

$("div.custList table tr")

也就是说，您可以通过$(this).children('td') 获得直接的<td> 孩子。

【讨论】：

不知道标签的插入。感谢您的帮助，效果很好。 :)
另外，如果你想得到至少有 1 个 td 的表行，使用下面的代码：$("div.custList table tr:has(td)").click(function () { //Code here }); 这将帮助你跳过第一个表头行。

【解决方案2】：

试试jQuery的delegate()函数，像这样：

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

代理的工作方式与live() 相同，只是live() 不能应用于链式项，而delegate() 允许您在元素中指定要操作的元素。

【讨论】：

从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。
这个答案（使用@Bludream 更新）是绑定事件的最有效方法，因为您不必为每个 tr 绑定，只需在父元素（在我们的例子中是表）上绑定。

【解决方案3】：

这对我有用！

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

【讨论】：

【解决方案4】：

由于 TR 元素包含 TD 元素，因此您实际单击的是 TD（然后它会冒泡到 TR），因此您可以简化选择器。这样获取值也更容易，点击的TD就是this，包裹它的TR就是this.parent

将您的 javascript 代码更改为以下内容：

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

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

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

【讨论】：

【解决方案6】：

$(this).find('td') 会在 tr 中为您提供一个 td 数组。

【讨论】：

请注意，这还将返回任何嵌套表的所有 <td>。 children() 返回 immediate 孩子，就像 $(this).find('> td') 会做的那样。

【解决方案7】：

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

【讨论】：