HTML如何实现点击表格行变色效果？

在网页开发中,为表格行添加点击变色效果既能提升交互体验，又能强化视觉反馈，以下是符合现代Web标准的5种实现方式，包含详细代码示例和最佳实践建议。

基础JavaScript实现

<table id="colorTable">
  <tr><td>内容1</td><td>数据A</td></tr>
  <tr><td>内容2</td><td>数据B</td></tr>
</table>
<script>document.querySelectorAll('#colorTable tr').forEach(row => {row.addEventListener('click', function() {// 切换样式类实现状态保持this.classList.toggle('active-row');});});</script>
<style>.active-row {background-color: #e3f2fd;transition: background 0.3s ease;}tr:hover {cursor: pointer;background-color: #f5f5f5;}</style>

• 使用classList代替直接修改style,便于样式维护
• 添加CSS过渡动画提升视觉效果
• 通过:hover伪类增强交互提示

高级功能扩展

多选模式实现

let lastSelected = null;
document.querySelectorAll('tr').forEach(row => {row.addEventListener('click', function(e) {if (e.shiftKey && lastSelected) {// 实现Shift多选逻辑const rows = Array.from(document.querySelectorAll('tr'));const start = rows.indexOf(lastSelected);const end = rows.indexOf(this);rows.slice(Math.min(start,end), Math.max(start,end)+1).forEach(r => r.classList.add('selected'));} else {this.classList.toggle('selected');}lastSelected = this;});});

<h4>2. 移动端优化方案</h4>
<pre><code>tr {

-webkit-tap-highlight-color: transparent;
}

@media (hover: none) {
tr {
min-height: 48px; / 满足点击区域标准 /
}
}

性能优化建议

document.getElementById('tableId').addEventListener(
  'click', 
  (e) => {
    if(e.target.tagName === 'TD') {
      const row = e.target.closest('tr');
      row.classList.toggle('active');
    }
  }
);

  <div class="grid-item">
    <h4>内存管理</h4>
    <pre><code>// 使用弱引用避免内存泄漏