Angular实现通用点击事件获取不同表格td内嵌数据的方法

核心实现思路是用事件委托机制做通用逻辑封装，无需给每个td/表格单独写点击处理，一套代码即可适配所有新增表格。

1. 组件TS逻辑编写 #

在对应组件的.ts文件中定义存储变量和通用处理方法：

export class YourComponent {
  // 符合需求格式的存储变量
  tableName: string = '';
  tdValue: string = '';

  // 通用点击处理方法
  handleTableTdClick(event: MouseEvent): void {
    // 兼容点击td内部子元素的场景
    const clickTarget = event.target as HTMLElement;
    const tdElement = clickTarget.closest('td');
    if (!tdElement) return;

    // 获取当前td所属的表格name属性
    const tableElement = tdElement.closest('table') as HTMLTableElement;
    if (!tableElement?.name) return;

    // 变量赋值
    this.tableName = tableElement.name;
    this.tdValue = tdElement.textContent?.trim() || '';

    // 此处接入你的业务逻辑
    // 路由跳转带参数示例：this.router.navigate(['/sub-graph-page'], { queryParams: { keyword: this.tdValue } })
    // 同域iframe父页面通信示例：window.parent.fillSearchInput(this.tdValue)
    // 跨域iframe通信示例：window.parent.postMessage({ type: 'searchFill', value: this.tdValue }, '*')
  }
}

2. 模板绑定逻辑 #

两种绑定方式可根据页面布局选择：

• 写法1：父容器绑定（推荐，多表格仅需绑定1次事件，性能更高）

<!-- 所有表格放在同一个父容器内 -->
<div (click)="handleTableTdClick($event)">
  <table name="tableA">
    <tr><td>Some Value</td><td>Other Value</td></tr>
    <!-- 其余tableA内容 -->
  </table>

  <table name="tableB">
    <tr><td>TableB Value1</td><td>TableB Value2</td></tr>
    <!-- 其余tableB内容 -->
  </table>
</div>

• 写法2：单表格绑定（适合表格分散在页面不同位置的场景）

<table name="tableA" (click)="handleTableTdClick($event)">
  <!-- tableA内容 -->
</table>

<div class="other-area">
  <table name="tableB" (click)="handleTableTdClick($event)">
    <!-- tableB内容 -->
  </table>
</div>

3. 拓展说明 #

• 如果需要屏蔽特定td的点击事件，只需给对应td加标识类，比如no-click，在处理方法开头加判断即可：if (tdElement.classList.contains('no-click')) return;
• 后续新增表格无需修改逻辑，只要给table加对应的name属性即可自动适配

内容的提问来源于stack exchange，提问作者Mohit Rai