Jquery closest与find函数返回undefined，如何获取点击行首td值？

问题根源 #

你遇到的undefined问题，核心是函数里的this没有指向被点击的<td>元素。当你用内联onclick='verifyOfflinepayment()'调用函数时，函数内部的this默认指向全局的window对象，而不是触发点击的那个单元格，所以$(this).closest('tr')找不到对应的表格行，最终返回undefined。

两种解决方法 #

方法一：给函数传递当前元素 #

修改内联事件，把被点击的元素作为参数传给函数：

<td onclick='verifyOfflinepayment(this)'> $persian_date </td>

然后调整函数，接收这个参数并使用：

function verifyOfflinepayment(element) {
  $("#verifying").show();
  // 用传入的element代替this
  alert($(element).closest('tr').find('td').eq(0).html());
}

方法二：用jQuery绑定事件（更推荐） #

内联事件不利于代码维护，推荐用jQuery的事件绑定方式，这样this会自动指向触发事件的DOM元素：

首先去掉内联的onclick，给目标<td>加个类名方便选择：

<td class="verify-trigger"> $persian_date </td>

然后在脚本里绑定点击事件：

$(document).ready(function() {
  $('.verify-trigger').click(function() {
    $("#verifying").show();
    // 这里的this就是被点击的<td>
    alert($(this).closest('tr').find('td').eq(0).html());
  });
});

这样就能正确获取到表格第一列的内容啦～

内容的提问来源于stack exchange，提问作者shadow