使用jQuery获取td值匹配输入值并滚动到对应tr

嘿，作为jQuery新手能写出这样的思路已经不错啦，但你的代码里有几个关键问题，导致它没法正常工作，我帮你梳理并修正一下：

问题分析 #

• 字符串调用DOM方法的错误：你用cellText.closest('tr')，但cellText是通过$(this).html()获取的文本字符串，字符串根本没有closest()这个DOM方法！应该用当前的td元素对象来调用，也就是$(this).closest('tr')。
• 无效的ID选择器：当你拿到tr的id后，$(goTo)是错误的写法——jQuery会把goTo的值当成普通选择器，而不是ID选择器。正确的写法是$('#' + goTo)，必须加上#前缀才能选中对应ID的元素。
• 内容匹配的准确性问题：html()会获取单元格内的所有HTML代码（包括标签），如果你只想匹配单元格的文本内容，用text()更合适；另外加上.trim()可以忽略文本前后的空格，让匹配更友好。
• 循环冗余问题：你的代码会遍历所有td，就算找到匹配项也会继续往下走，最后会滚动到最后一个匹配的tr，而不是第一个。最好找到匹配项后就停止循环。

修正后的代码 #

$('.client-data td').each(function() {
  // 获取单元格文本并去除前后空格
  const cellText = $(this).text().trim();
  // 获取输入框值并去除前后空格
  const inputVal = $('#findField').val().trim();
  
  // 匹配成功时执行滚动
  if (cellText === inputVal) {
    const targetTr = $(this).closest('tr');
    // 平滑滚动到目标tr的位置，300是动画时长（毫秒），不需要动画可以去掉animate直接用scrollTop
    $('html, body').animate({
      scrollTop: targetTr.offset().top
    }, 300);
    return false; // 停止each循环，避免遍历剩余元素
  }
});

额外优化小技巧 #

如果希望滚动后目标tr和顶部之间留一点空隙（比如避免被页面顶部的导航栏挡住），可以给offset().top减去一个数值，比如：

scrollTop: targetTr.offset().top - 50 // 减去50px的空隙

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