Angular 6中获取表格第二个td值失败，closest方法疑似失效如何解决？

首先先澄清一个点：closest()方法在Chrome（41版本及以上）和Firefox（35版本及以上）都是完全支持的，所以你遇到的问题大概率不是浏览器兼容性问题，而是获取目标元素的方式出了问题。

一、为什么你的closest代码可能失效？ #

你当前用的e.originalEvent.toElement并不是标准的事件属性——toElement是IE浏览器特有的属性，在Chrome和Firefox中要么返回undefined，要么指向的元素不符合预期，这才导致closest('td')无法正确找到目标元素。

在Angular（包括Angular 6）中，事件对象已经经过框架的跨浏览器兼容处理，直接用e.target就可以获取触发事件的源元素，这是标准且可靠的写法。

二、如何获取表格行中的第二个td值？ #

下面提供两种常用且可靠的方法，你可以根据场景选择：

方法1：结合closest()和querySelector() #

先定位到当前元素所在的表格行（tr），再通过CSS选择器td:nth-child(2)找到第二个单元格：

// 假设这是你的点击事件处理函数
onTableCellClick(e: MouseEvent) {
  // 先找到当前元素所在的tr
  const targetRow = (e.target as HTMLElement).closest('tr');
  if (targetRow) {
    // 获取第二个td元素
    const secondTd = targetRow.querySelector('td:nth-child(2)');
    if (secondTd) {
      // 获取td的文本值，trim()去除首尾空格
      const secondTdValue = secondTd.textContent?.trim();
      console.log('第二个td的值：', secondTdValue);
    }
  }
}

方法2：利用元素的children属性 #

children属性会返回当前元素的所有子元素集合（仅包含元素节点），索引从0开始，所以第二个td对应的索引是1：

onTableCellClick(e: MouseEvent) {
  const targetRow = (e.target as HTMLElement).closest('tr');
  if (targetRow) {
    const tdElements = targetRow.children;
    // 确保行内至少有2个td
    if (tdElements.length >= 2) {
      const secondTd = tdElements[1] as HTMLElement;
      const secondTdValue = secondTd.textContent?.trim();
      console.log('第二个td的值：', secondTdValue);
    }
  }
}

额外提示 #

在Angular中尽量避免直接操作DOM，如果你是通过*ngFor渲染的表格，可以考虑把每行的数据绑定到事件上，比如：

<tr *ngFor="let item of tableData">
  <td (click)="handleRowClick(item)">{{item.col1}}</td>
  <td>{{item.col2}}</td>
</tr>

这样在handleRowClick函数中直接就能拿到该行的完整数据，不需要再去DOM中提取值，这更符合Angular的数据流理念。

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