点击按钮遍历表格行<td>标签获取值无输出，求排查解决

问题根源 #

你遇到的核心问题是**this的指向错误**。当使用内联onclick="viewProduct()"调用函数时，函数内部的this默认指向全局的window对象，而不是触发点击的那个<a>按钮。这就导致$(this).closest('tr')无法找到对应的表格行，返回空的jQuery对象，所以each循环根本不会执行，打印文本也为空。

另外还有个小细节：你原代码里写的console.log('textval')是打印字符串"textval"，不是变量textval的值，这也是为什么即使找到元素也看不到正确内容的原因之一。

解决方法 #

这里提供两种可行的修复方案，你可以根据自己的习惯选择：

方案1：修改内联事件，传递this参数

直接在调用函数时把当前按钮元素传进去：

1. 更新按钮的HTML代码：

<a href="#" style="margin-right: 5px" onclick="viewProduct(this)" class="btn btn-info btn-xs">
  <i style="font-size: 15px" class="fa fa-eye"></i>
</a>

2. 调整viewProduct函数，接收按钮参数：

function viewProduct(btn) {
  // 用传入的btn元素查找父级tr
  $(btn).closest('tr').find('td').each(function() {
    var textval = $(this).text();
    console.log(textval); // 现在打印的是单元格的文本值
  });
}

方案2：使用jQuery事件绑定（推荐）

这种方式遵循HTML与JS分离的原则，代码更易维护，也避免了this指向的问题：

1. 先移除按钮上的内联onclick属性：

<a href="#" style="margin-right: 5px" class="btn btn-info btn-xs">
  <i style="font-size: 15px" class="fa fa-eye"></i>
</a>

2. 在JS中使用事件委托绑定点击事件：

$(document).ready(function() {
  // 给表格内的查看按钮绑定点击事件
  $('#productsTable').on('click', '.btn-info.btn-xs', function() {
    // 这里的this自然指向触发点击的按钮
    $(this).closest('tr').find('td').each(function() {
      var textval = $(this).text();
      console.log(textval);
    });
  });
});

验证小技巧 #

如果之后再遇到类似DOM元素查找失败的问题，可以先在函数里打印console.log($(this))或者传入的按钮参数，确认是否指向了正确的DOM元素，这能快速定位是不是this指向的问题。

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