标签不支持href，必须用JavaScript绑定click事件并跳转，或用包裹单元格；需处理键盘导航、屏幕阅读器支持及事件冒泡，确保可访问性与多端兼容。
tr 标签本身不支持 href，必须用 JavaScript 模拟点击行为
HTML 规范里 真正可行的路径只有两种：用 给每行 JS 部分： 如果不想用 JS，可以保持原表格结构，把 CSS： 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 仅靠鼠标点击不是完整方案。键盘用户按 整行可点击看着简单，但涉及语义、可访问性、多端响应和事件冒泡控制。最容易被忽略的是键盘支持和点击穿透判断——很多项目上线后才发现盲人用户或键盘党根本用不了。 不是可激活元素，直接加 href 或 onclick 属性不会触发默认跳转，也不符合语义和可访问性要求。浏览器会忽略 这类写法，且屏幕阅读器无法识别。 包裹整行内容（需调整 CSS），或用 JS 绑定 click 事件并主动跳转。
改成 ，但会牺牲数据表格的语义和 SEO 友好性
加 cursor: pointer 却没绑定任何行为——这是典型的“伪可点击”，用户点下去毫无反馈用 addEventListener 绑定 tr 点击跳转最稳妥
设置 data-href 属性，再统一监听，避免内联 onclick 和重复绑定。<tr data-href="/user/123">
<td>张三</td>
<td>active</td>
</tr>
document.querySelectorAll('tr[data-href]').forEach(row => {
row.addEventListener('click', function(e) {
// 防止点击 td 内部链接时重复跳转
if (e.target.tagName === 'A' || e.target.closest('a')) return;
window.location.href = this.dataset.href;
});
row.style.cursor = 'pointer';
});
e.target.closest('a') 判断，否则点击行内按钮或链接会触发两次跳转window.open() 替代 window.location.href，除非明确需要新窗口——多数场景下用户期望当前页跳转click 有约 300ms 延迟，如需即时响应，可加 touchstart 事件，但需防重复触发CSS 实现“视觉上整行可点”但实际只点 td 内 a 标签
拉伸填满整个 ，再让 的 position: relative 配合 z-index 提升层级。<tr>
<td><a href="/user/123" class="row-link">张三</a></td>
<td><a href="/user/123" class="row-link">active</a></td>
</tr>
tr { position: relative; }
.row-link {
display: block;
width: 100%;
height: 100%;
padding: 0.75rem 1rem;
text-decoration: none;
}
/* 让点击区域延伸到 cell 边缘 */
td { padding: 0; }
.row-link:hover { background: #f5f5f5; }
都要放一个 ，不能只在某一个单元格里放——否则只有那一列能点padding 要从 移到 上，否则 a 无法撑满tabindex="-1" 控制焦点逻辑aria-label 和 keyboard 支持不能省
Tab 时， 默认不可聚焦，必须手动加 tabindex="0" 并处理 Enter / Space 键。row.tabIndex = 0;
row.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
window.location.href = row.dataset.href;
}
});
e.preventDefault()，否则空格键会滚动页面aria-label 建议加上，例如 aria-label="查看用户张三详情"，让屏幕阅读器读出意图而非“跳转到 /user/123”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
