如何用原生JS与D3.js实现可整行点击跳转的表格功能

<tr data-href="/user-detail/123">
  <td>张三</td>
  <td>前端开发</td>
</tr>

• 事件委托绑定到表格父容器，避免给每一行单独添加监听器，同时兼容后续动态插入的表格行
• 识别用户快捷键操作：按住Ctrl/Command、鼠标中键点击时自动在新标签页打开，和原生链接的交互习惯完全一致
• 过滤行内其他交互元素：如果点击的是行内的按钮、表单控件等组件，自动跳过跳转逻辑，避免功能冲突
  代码示例：

const tableContainer = document.querySelector('#target-table');

tableContainer.addEventListener('click', (event) => {
  // 定位点击区域所属的可跳转tr
  const clickableRow = event.target.closest('tr[data-href]');
  // 无目标行、或点击的是标记了不触发行跳转的元素，直接终止逻辑
  if (!clickableRow || event.target.closest('[data-no-row-jump]')) return;

  // 兼容新标签页打开的交互逻辑
  if (event.ctrlKey || event.metaKey || event.button === 1) {
    window.open(clickableRow.dataset.href, '_blank');
  } else {
    window.location.href = clickableRow.dataset.href;
  }
});

tr[data-href] {
  cursor: pointer;
}

• 动态渲染表格行时，直接从原始数据中读取跳转地址，不需要和DOM属性做二次同步
• 事件绑定基于表格容器做委托，减少重复监听器的内存占用
• 交互逻辑和原生版本完全对齐，保持用户操作一致性
  代码示例：

// 示例行数据，link字段存储对应跳转地址
const tableRowsData = [
  { id: 1, userName: '张三', link: '/user-detail/1' },
  { id: 2, userName: '李四', link: '/user-detail/2' }
];

// 选中表格tbody容器
const tableBody = d3.select('#target-table tbody');

// 绑定数据生成行和单元格
tableBody.selectAll('tr')
  .data(tableRowsData)
  .join('tr')
  .selectAll('td')
  .data(row => [row.id, row.userName])
  .join('td')
  .text(cellContent => cellContent);

// 绑定统一的点击委托事件
tableBody.on('click', (event) => {
  // 定位点击所属的tr
  const targetRow = event.target.closest('tr');
  if (!targetRow) return;

  // 从绑定的D3数据中读取跳转地址，无需读取DOM属性
  const rowDatum = d3.select(targetRow).datum();
  // 无跳转地址、或点击行内禁止触发跳转的元素时终止逻辑
  if (!rowDatum?.link || event.target.closest('[data-no-row-jump]')) return;

  // 兼容新标签页交互
  if (event.ctrlKey || event.metaKey || event.button === 1) {
    window.open(rowDatum.link, '_blank');
  } else {
    window.location.href = rowDatum.link;
  }
});