点击按钮滚动定位指定文本并高亮、重复点击跳转下一个匹配项实现问题

第一步：新增触发按钮 #

在页面合适位置添加点击触发按钮，示例代码如下：

<button id="searchApplesBtn">查找apples</button>

第二步：新增高亮样式 #

给匹配到的关键词添加高亮效果，样式可自行调整：

.highlight-keyword {
  background-color: #ffff00;
  font-weight: bold;
}

第三步：核心JS逻辑实现 #

逻辑包含匹配索引记录、循环跳转、高亮切换、滚动定位四个核心部分，适配你提供的表格结构：

// 初始化匹配索引
let currentMatchIndex = -1;
// 目标搜索关键词
const targetKeyword = 'apples';
// 外层带滚动的容器
const scrollContainer = document.getElementById('fgmevtcfm:j_id1386');
// 触发按钮
const searchBtn = document.getElementById('searchApplesBtn');

searchBtn.addEventListener('click', function() {
  // 清除上一次的高亮标记
  clearHighlight();
  
  // 筛选所有匹配关键词的单元格
  const allMatches = Array.from(scrollContainer.querySelectorAll('tbody td')).filter(td => td.textContent.trim() === targetKeyword);
  
  if (allMatches.length === 0) return;
  
  // 索引自增，超过匹配总数时回到0实现循环效果
  currentMatchIndex = (currentMatchIndex + 1) % allMatches.length;
  const currentTarget = allMatches[currentMatchIndex];
  
  // 给当前匹配项加高亮
  currentTarget.classList.add('highlight-keyword');
  
  // 平滑滚动到对应位置，调整block参数可修改定位位置：start=靠顶部、center=居中、end=靠底部
  currentTarget.scrollIntoView({
    behavior: 'smooth',
    block: 'center',
    container: scrollContainer
  });
})

// 清除所有高亮的工具函数
function clearHighlight() {
  document.querySelectorAll('.highlight-keyword').forEach(el => {
    el.classList.remove('highlight-keyword');
  })
}

注意事项 #

• 如果表格是动态渲染的，需要确保JS执行时DOM已经加载完成，可以把代码放在DOMContentLoaded事件回调中，或者放在页面底部执行
• 如果需要支持模糊匹配，把筛选条件里的全等判断td.textContent.trim() === targetKeyword改成td.textContent.trim().includes(targetKeyword)即可
• 低版本浏览器如果不支持scrollIntoView的container参数，可以替换为手动计算滚动距离：scrollContainer.scrollTop = currentTarget.offsetTop - scrollContainer.offsetTop - scrollContainer.clientHeight/2

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