并排两个表格实现相同tr行CSS样式：选中行同步设置背景色

核心逻辑是两个表格的行一一对应、行索引完全匹配，点击时获取当前选中行的索引，同步给两个表格对应索引的行添加高亮样式即可。

1. 先定义高亮CSS样式 #

先新增通用高亮类，建议优先级设高避免被原有表格样式覆盖：

.highlight-row {
  background-color: #d4edda !important; /* 淡绿色，可自行调整色值 */
}

2. 原生JavaScript实现代码 #

假设左侧固定表格id为table1，右侧可滚动表格id为table2：

// 获取两个表格的所有行
const table1Rows = document.querySelectorAll('#table1 tr');
const table2Rows = document.querySelectorAll('#table2 tr');

// 给table1的每一行绑定点击事件
table1Rows.forEach((row, index) => {
  row.addEventListener('click', () => {
    // 先移除所有行的高亮状态
    table1Rows.forEach(r => r.classList.remove('highlight-row'));
    table2Rows.forEach(r => r.classList.remove('highlight-row'));
    // 给对应索引的两行同步加高亮
    table1Rows[index].classList.add('highlight-row');
    table2Rows[index].classList.add('highlight-row');
  });
});

如果需要支持点击右侧表格行也同步高亮，给table2Rows也加相同的绑定逻辑即可。

3. jQuery实现代码（项目引入jQuery时可用） #

代码更简洁：

$('#table1 tr').click(function() {
  const rowIndex = $(this).index();
  // 清除所有行的高亮
  $('tr').removeClass('highlight-row');
  // 同步给两个表格对应行加高亮
  $(`#table1 tr:eq(${rowIndex}), #table2 tr:eq(${rowIndex})`).addClass('highlight-row');
});

注意事项 #

• 需保证两个表格行数完全一致、行索引一一对应，避免出现高亮错位
• 如果表格包含表头行，绑定点击事件时可以通过tr:not(:first-child)排除表头，或者计算索引时额外减1
• 若使用Vue/React等前端框架，无需直接操作DOM：将选中行的索引存入响应式变量，渲染行时判断当前行索引是否等于选中索引，动态绑定高亮类即可，逻辑和原生实现完全一致。

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