如何通过回车键将表格高亮行克隆至另一表格？

没问题，我来帮你实现这个方向键高亮+回车添加行的功能。核心思路是跟踪当前选中的行索引，监听键盘事件来切换高亮，回车时复制行数据到目标表格。下面是完整的实现方案：

1. 基础HTML结构 #

先准备两个表格，一个源表格（用于选择行）和一个目标表格（用于接收选中的行），同时给源表格设置tabindex让它能接收键盘事件，再定义高亮行的样式：

<style>
  /* 高亮行的样式，可根据需求自定义 */
  .highlighted {
    background-color: #cce5ff;
    outline: none; /* 去掉默认聚焦边框，可选 */
  }
</style>

<!-- 源表格 -->
<table id="myTable" tabindex="0" border="1" cellpadding="8">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td>alice@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
      <td>bob@example.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Charlie</td>
      <td>charlie@example.com</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Diana</td>
      <td>diana@example.com</td>
    </tr>
  </tbody>
</table>

<!-- 目标表格 -->
<table id="targetTable" border="1" cellpadding="8" style="margin-top: 20px;">
  <thead>
    <tr>
      <th>Selected ID</th>
      <th>Selected Name</th>
      <th>Selected Email</th>
    </tr>
  </thead>
  <tbody>
    <!-- 选中的行会添加到这里 -->
  </tbody>
</table>

2. JavaScript核心逻辑（jQuery版本） #

我们需要实现几个关键功能：跟踪选中索引、键盘事件监听、高亮切换、行复制。代码里加了详细注释，方便你理解：

$(document).ready(function() {
  // 缓存DOM元素，提升性能
  const $sourceTable = $('#myTable');
  const $sourceRows = $sourceTable.find('tbody tr');
  const $targetTbody = $('#targetTable tbody');
  let currentRowIndex = -1; // 初始状态：无选中行

  // 页面加载后让源表格自动聚焦，打开就能直接用方向键操作
  $sourceTable.focus();

  // 点击行时同步高亮和选中索引（可选保留原点击功能）
  $sourceRows.on('click', function() {
    $sourceRows.removeClass('highlighted');
    $(this).addClass('highlighted');
    currentRowIndex = $sourceRows.index(this);
  });

  // 监听键盘事件：上下方向键切换高亮，回车添加行
  $sourceTable.on('keydown', function(e) {
    const rowCount = $sourceRows.length;
    if (rowCount === 0) return; // 源表格无数据时直接返回

    switch(e.keyCode) {
      case 38: // 上方向键
        e.preventDefault(); // 阻止页面滚动
        // 循环切换索引：到第一行再按上，跳转到最后一行
        currentRowIndex = (currentRowIndex - 1 + rowCount) % rowCount;
        updateHighlight();
        break;
      case 40: // 下方向键
        e.preventDefault();
        // 循环切换索引：到最后一行再按下，跳转到第一行
        currentRowIndex = (currentRowIndex + 1) % rowCount;
        updateHighlight();
        break;
      case 13: // 回车键
        e.preventDefault();
        if (currentRowIndex !== -1) { // 有选中行时才执行添加
          addRowToTarget();
        }
        break;
    }
  });

  // 更新高亮行的工具函数
  function updateHighlight() {
    $sourceRows.removeClass('highlighted');
    $($sourceRows[currentRowIndex]).addClass('highlighted');
    // 可选：自动滚动到当前高亮行（当表格有滚动条时很实用）
    $($sourceRows[currentRowIndex])[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

  // 将选中行添加到目标表格的工具函数
  function addRowToTarget() {
    const $selectedRow = $($sourceRows[currentRowIndex]);
    // 克隆行并移除高亮类，避免样式污染目标表格
    const $newRow = $selectedRow.clone().removeClass('highlighted');
    $targetTbody.append($newRow);
  }
});

关键细节说明 #

• 聚焦处理：给#myTable设置tabindex="0"是让它能接收键盘事件的关键，页面加载后自动聚焦，打开页面就能直接操作。
• 循环切换：用取模运算实现索引的循环切换，避免出现索引越界的问题，让方向键操作更流畅。
• 样式隔离：克隆行时移除highlighted类，防止源表格的高亮样式带到目标表格中。
• 阻止默认行为：方向键事件中调用e.preventDefault()，避免页面因为方向键滚动，提升操作体验。

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