最轻量兼容的表格跳转方式是直接在或上用onclick="window.location.href='url';"，需注意引号嵌套、可访问性（role="link"+tabindex="0"+onkeydown）、标签样式重置及spa中应调用路由api而非window.location.href。
表格单元格点击跳转：用 onclick 绑定 window.location.href
直接给 <td> 或 <code><tr> 加 <code>onclick 是最轻量、兼容性最好的方式，不需要额外库或复杂事件委托。
常见错误是写成 onclick="window.location = 'xxx'"（漏了 .href），这在部分浏览器里会静默失败；或者用了 window.open() 却没处理弹窗拦截。
-
onclick="window.location.href = 'https://example.com';"—— 页面内跳转，推荐 - 加
return false;可阻止默认行为（比如表单提交或链接冒泡） - 如果跳转地址含变量，用单引号包裹字符串，避免引号嵌套冲突：
onclick="window.location.href = '/user?id=' + <code>userId;"
整行 <tr> 可点击：注意鼠标样式和可访问性
<p>让整行响应点击更符合用户直觉，但原生 <code><tr> 不是交互元素，键盘用户无法聚焦，屏幕阅读器也可能忽略。
<p>解决办法不是加 <code>tabindex 然后硬塞 onclick（那只是“能点”，不是“可访问”），而是明确语义：
- 给
<tr> 加 <code>role="link" 和 tabindex="0"
- 用
onkeydown 监听 Enter 或 Space 键触发跳转
- CSS 中加
cursor: pointer; 和 user-select: none; 避免误选文字
示例：
<tr role="link" tabindex="0" onclick="window.location.href='/detail/123';" onkeydown="if(event.key==='Enter'||event.key===' '){window.location.href='/detail/123';}">
<td>订单 #123</td>
<td>待发货</td>
</tr>
用 <a></a> 标签替代 onclick？可行但要绕开表格渲染限制
<tr> 加 <code>role="link" 和 tabindex="0"
onkeydown 监听 Enter 或 Space 键触发跳转cursor: pointer; 和 user-select: none; 避免误选文字示例：
<a></a> 标签替代 onclick？可行但要绕开表格渲染限制语义上，跳转应该用 <a></a>。但直接把 <a></a> 塞进 <td> 会导致样式错乱（如下划线、颜色），且 <code><a></a> 默认是行内元素，撑不满单元格。
解决方案是重置样式并提升显示层级：
- 给
<a></a>加display: block;和height: 100%;，再设text-decoration: none; - 确保
<td> 有 <code>position: relative;，让<a></a>的height: 100%生效 - 避免在
<a></a>上套onclick——重复绑定可能引发两次跳转
简写写法：
<td><a href="/item/456" style="display:block;height:100%;padding:8px;text-decoration:none;">商品 A</a></td>
跳转前需要确认或加载状态？别直接改 window.location
如果点击后要先发请求（如标记已读）、校验权限、或显示 loading，就不能立刻赋值 window.location.href，否则页面会立即卸载，异步操作被中断。
正确做法是把跳转逻辑放进回调或 async 函数中：
- 用
fetch()后接then(() => window.location.href = ...) - 用
async函数时，await完毕再跳转，避免竞态 - 跳转前禁用按钮或加 loading class，防止重复点击
容易忽略的点：SPA 应用（如 Vue/React）不该用 window.location.href，而该调用路由实例的 push() 或 navigate() 方法，否则会整页刷新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
