无需CSS实现Angular表格点击金额列获取对应行编号方案

解决方案 #

核心问题根因 #

你当前的HTML结构不符合标准表格规范，采用了列优先循环的逻辑：两个<td>分别独立循环<tr>，导致序号和金额属于不同的DOM行元素，没办法直接关联，才会需要绕路解析event.target。

最优方案：重构为行优先循环（推荐） #

直接把点击事件绑定在整行上，点击行内任意单元格都能触发，直接传递对应行的序号值，完全不需要解析DOM：

<table>
  <!-- 先循环行，通过index关联序号数组和金额数组的对应项 -->
  <tr 
    *ngFor="let code of codeArr; let rowIndex = index"
    (click)="specificCheckDetails(code)"
    <!-- 可直接绑定高亮样式，比如当前选中行等于code就加高亮类 -->
    [class.highlight]="selectedCode === code"
  >
    <td>{{ code }}</td>
    <td>${{ itemArr[rowIndex] }}</td>
  </tr>
</table>

修改后specificCheckDetails方法可以直接拿到点击行的序号，不需要再处理event.target。

兼容方案：不改原有结构的前提下实现 #

如果你不想调整现有HTML结构，直接给金额列的<tr>也加点击事件，用*ngFor自带的index变量取对应序号即可：

<td>
  <tr id='{{ code }}' *ngFor="let code of this.codeArr" (click)="specificCheckDetails($event)">{{ code }}</tr>
</td>
<td>
  <tr 
    id="{{ item }}" 
    *ngFor="let item of this.itemArr; let i = index"
    <!-- 直接通过索引取对应序号传参 -->
    (click)="specificCheckDetailsByCode(codeArr[i])"
  >
    ${{ item }}
  </tr>
</td>

后续不管点击序号列还是金额列，都能拿到对应行的序号值，不需要CSS层级覆盖这种hack操作。

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