如何通过上下箭头键移动表格高亮行？代码仅生效一次排查

DevOps 小满

2026-7-17

问题分析与修复方案

1. 高亮行仅能移动一次的原因

你定义的table变量始终指向初始化时的最后一行，每次按下箭头键时，只是给相邻行添加了高亮类，但没有更新变量的指向。第二次按键时，代码仍会对最初的那行进行操作，导致高亮行无法持续移动。

2. 输入框无法填写的原因

你在body的keydown事件中全局调用了e.preventDefault()，这会阻止所有键盘事件的默认行为，包括输入框的字符输入、光标移动等操作，直接导致输入框无法正常使用。

修复后的JavaScript代码

// 初始化高亮行，限定选中tbody内的tr，避免误选表头行
let currentRow = $('#transaksiKasir tbody tr:last');
currentRow.addClass('bg-slate-700 text-white');

$('body').on('keydown', function(e) {
  // 仅在按下上下箭头时阻止默认行为，保留其他按键的正常功能
  if (e.keyCode === 38 || e.keyCode === 40) {
    e.preventDefault();
    
    if (e.keyCode === 40) {
      // 判断是否存在下一行，避免越界操作
      const nextRow = currentRow.next('tr');
      if (nextRow.length) {
        currentRow.removeClass('bg-slate-700 text-white');
        currentRow = nextRow;
        currentRow.addClass('bg-slate-700 text-white');
      }
    } else if (e.keyCode === 38) {
      // 判断是否存在上一行，避免越界操作
      const prevRow = currentRow.prev('tr');
      if (prevRow.length) {
        currentRow.removeClass('bg-slate-700 text-white');
        currentRow = prevRow;
        currentRow.addClass('bg-slate-700 text-white');
      }
    }
  }
});