JS如何获取当前选择的行数和列数？如何改变其颜色？

<style>
  .highlight-cell {
    background-color: #ffeb3b;
    box-shadow: inset 0 0 0 2px #ff9800;
  }
  .highlight-row {
    background-color: #e3f2fd;
  }
  .highlight-col {
    background-color: #fff8e1;
  }
</style>
在动态网页开发中，处理表格数据是常见需求，用户常需精确获取当前选中的表格行与列位置，并实现视觉反馈，下面将详细解析如何通过原生JavaScript实现这一功能。
### 核心实现逻辑
当用户点击表格单元格时，通过DOM接口可获取两个关键属性：
- `rowIndex`: 返回行在父元素中的索引位置
- `cellIndex`: 返回单元格在行中的索引位置
```javascript
const table = document.getElementById('dataTable');
table.addEventListener('click', (event) => {
  const targetCell = event.target.closest('td, th');
  if (!targetCell || !table.contains(targetCell)) return;
  // 获取行列索引
  const rowIndex = targetCell.parentElement.rowIndex;
  const colIndex = targetCell.cellIndex;
  // 清除历史高亮
  clearHighlights();
  // 设置新选择的高亮
  highlightSelection(rowIndex, colIndex);
  console.log(`选中行: ${rowIndex}, 列: ${colIndex}`);
});

高亮实现方案

通过CSS类控制视觉样式,避免直接操作style属性：

function highlightSelection(rowIndex, colIndex) {
  // 高亮整行
  const selectedRow = table.rows[rowIndex];
  selectedRow.classList.add('highlight-row');
  // 高亮整列
  for (let i = 0; i < table.rows.length; i++) {
    const cell = table.rows[i].cells[colIndex];
    if(cell) cell.classList.add('highlight-col');
  }
  // 高亮当前单元格
  selectedRow.cells[colIndex].classList.add('highlight-cell');
}
function clearHighlights() {
  const elements = table.querySelectorAll('.highlight-row, .highlight-col, .highlight-cell');
  elements.forEach(el => {
    el.classList.remove('highlight-row', 'highlight-col', 'highlight-cell');
  });
}

完整实例演示

<table id="dataTable" border="1">
  <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
  <tr><td>张三</td><td>28</td><td>北京</td></tr>
  <tr><td>李四</td><td>32</td><td>上海</td></tr>
</table>
<script>
  // 上述JavaScript代码放置在此处
</script>

关键注意事项

1. 事件委托优化：使用closest()方法确保准确捕获单元格点击事件
2. 性能考量：通过classList操作类名而非直接修改style，减少重绘开销
3. 索引基准：注意rowIndex/cellIndex从0开始计数
4. 兼容性处理：closest()方法需IE11+支持，旧版浏览器可用polyfill

常见应用场景

• 数据报表交互
• 表格数据编辑系统
• 动态表单配置工具
• 数据可视化焦点控制

实际项目中，开发人员可能需要结合具体框架优化实现，比如在Vue中可使用@click="selectCell($event)"绑定事件，React则通过onClick属性传递事件对象,核心原理仍基于DOM标准的行列索引属性。

处理复杂表格时,建议考虑以下优化方向：

• 添加防抖机制避免高频点击
• 增加多选支持（Ctrl+点击）
• 结合localStorage保存选中状态
• 添加无障碍支持（ARIA属性）

通过原生API实现基础功能，既保证性能又避免依赖第三方库，这种方案在多数现代浏览器中运行稳定，维护成本较低，掌握核心的rowIndex和cellIndex属性应用，能解决大部分表格定位需求，根据项目复杂度,可在此基础上扩展更高级的交互功能。

在实际工程实践中，清晰的状态管理比炫酷特效更重要，建议将选中状态存储在独立对象中，与DOM操作解耦，这样能大幅提升代码可维护性，表格交互看似简单，但稳健的实现方案往往需要充分考虑边界情况和用户体验细节。