如何在JavaScript中识别点击图片所在的表格行？

完全没必要用event.target.currentSrc来实现，这方法既不高效也不鲁棒——万一图片路径修改，逻辑直接失效。下面给你几个更靠谱的方案，按推荐程度排序：

1. 用Element.closest()（最推荐） #

这是最简洁、鲁棒性最强的方法，直接让点击的图片元素向上查找最近的<tr>节点，不管中间嵌套多少层元素（哪怕以后<td>里新增其他嵌套标签，这方法依然有效）。

单个图片绑定事件示例 #

如果是动态生成单张图片后绑定点击事件：

// 动态创建img元素
const img = document.createElement('img');
img.src = 'static/img/xxx.jpg';
img.width = 100;

// 绑定点击回调
img.addEventListener('click', function() {
  const row = this.closest('tr');
  if (row) {
    // 拿到行后可操作，比如获取行内其他单元格内容
    const [typeCell, costCell] = row.querySelectorAll('td');
    console.log('机型:', typeCell.textContent.trim());
    console.log('成本:', costCell.textContent);
  }
});

事件委托（适合大量动态行） #

如果表格是动态生成的，更推荐给表格本身绑定事件（事件委托），不用给每张图片单独加监听，性能更好：

const table = document.getElementById('myTable');
table.addEventListener('click', function(e) {
  // 判断点击目标是img元素
  if (e.target.tagName.toLowerCase() === 'img') {
    const row = e.target.closest('tr');
    if (row) {
      // 处理行逻辑，比如高亮行或获取数据
      row.classList.toggle('highlight');
    }
  }
});

2. DOM层级遍历（仅作兼容参考） #

如果需要兼容极老浏览器（比如IE11之前），可以手动向上遍历父节点：

img.addEventListener('click', function(e) {
  let currentEl = e.target;
  // 向上遍历直到找到<tr>
  while (currentEl && currentEl.tagName.toLowerCase() !== 'tr') {
    currentEl = currentEl.parentNode;
  }
  if (currentEl) {
    // 找到目标行
  }
});

但这种方法维护性差，一旦DOM结构变动（比如<td>里加了<div>包裹图片），就得调整遍历层级，远不如closest()灵活。

为什么别用currentSrc？ #

依赖图片路径匹配行的问题很多：

• 路径可能因CDN更新、资源重命名等原因变化，导致匹配失败
• 需要遍历所有行的图片对比路径，效率低下
• 若存在相同路径的图片（比如复用图标），会匹配到错误的行

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