最简方式是直接给 <tr> 加 cursor: pointer，但需配合事件委托、tabindex="0" 和语义属性才能真正可点击，否则仅视觉提示无效。
给表格行加手型光标但不干扰默认行为
直接给 <tr> 加 cursor: pointer 是最简方式，但要注意它只是视觉提示，不自动赋予点击能力。很多开发者误以为加了样式就“能点”，结果绑定事件时发现没反应——通常是因为事件委托没配好，或 <tr> 内部有 <td> 阻断了事件冒泡。
- 必须显式给
<tr>设置cursor: pointer，不能只设在<td>上（否则鼠标移到单元格间隙时会变回箭头） - 如果
<tr>里有<button>或<a>，它们可能捕获事件并阻止冒泡，需手动加event.stopPropagation() - 移动端 Safari 对
<tr>的点击区域识别较弱，建议同时加touch-action: manipulation
用 CSS 选择器精准控制哪些行显示手型
不是所有行都需要可点击，比如表头或分隔行。用类名控制比全局设置更安全，避免误触。
- 给可点击的行加 class，例如
<tr class="clickable-row"> - CSS 写成
.clickable-row { cursor: pointer; }，不要用tr:hover { cursor: pointer; }（hover 不等于可点击） - 若使用 CSS-in-JS 或框架（如 React），确保 class 能正确注入到
<tr>元素上，而不是包裹 div - 禁用状态要同步更新样式：
.clickable-row.disabled { cursor: not-allowed; opacity: 0.6; }
绑定点击事件时必须处理的三个细节
光标只是第一步，真正让行“可点”靠 JavaScript。常见错误是监听 <table> 却没过滤非目标行，或用 onclick 属性导致难以维护。
- 推荐事件委托：给
<tbody>绑addEventListener('click', handler)，再用event.target.closest('tr')获取被点击的行 - 检查是否点击到了内部可聚焦元素（如
<input>），此时应跳过处理：if (event.target.matches('input, button, a')) return - 避免重复绑定：如果表格动态渲染，每次重绘前先
removeEventListener，或用唯一 symbol 作事件类型标识
兼容性与无障碍注意事项
仅靠 cursor: pointer 和 click 事件对屏幕阅读器不友好，键盘用户也无法操作。这不是“能点”，只是“看起来像能点”。
立即学习“前端免费学习笔记（深入）”；
- 必须给可点击行加
tabindex="0"，使其可聚焦 - 配合
role="row"和aria-label（如描述该行代表什么），否则 VoiceOver/NVDA 无法识别交互意图 - 按回车或空格键也应触发相同逻辑，不能只响应鼠标 click
- Chrome 120+ 开始对无
tabindex的<tr>点击做 warning，未来可能限制行为
