纯JS动态表格点击detail按钮获取同行id值为undefined的解决方法

你拿到undefined的问题，是三个逻辑疏漏叠加导致的：

• 错把类数组集合当单个DOM节点读属性：getElementsByClassName 不是返回匹配到的单个元素，是装着所有匹配元素的类数组盒子。你把这个盒子直接存到id变量里，再去读innerText——这个属性是盒子里的td元素才有的，盒子本身根本没这个属性，自然返回undefined。哪怕你当前行里class为id的td只有一个，方法返回的依然是这个装元素的盒子，不是td本身。
• 事件绑定逻辑不适配动态表格的场景：你在脚本刚执行的时候就去抓所有.detail按钮绑点击事件，但你的表格是后续才动态生成的，脚本跑的时候DOM里根本不存在这些按钮，就算逻辑写对了，后续动态加出来的按钮也绑不上点击响应。
• 遍历方式不规范：用for...in循环遍历HTMLCollection类数组本来就容易出问题，会不小心遍历到集合上挂载的其他额外属性，平白增加逻辑bug的概率。

1. 换对取值逻辑，先从类数组盒子里拿出真正的td元素，再读文本
   要么用[0]取类数组里的第一个元素，要么直接用querySelector('.id')拿到行内的单个id元素，拿到单节点之后再读innerText，就能拿到正确的文本值。
2. 用事件委托替代逐按钮绑定，解决动态表格绑定失效的问题
   把点击事件绑在不会随便动态变化的稳定父级上（比如table元素，甚至document根节点），事件触发的时候再判断用户点的是不是.detail类的按钮。这种写法不需要等表格完全渲染完再绑事件，后续动态加的行、按钮都能正常响应点击，也省去了循环遍历每个按钮重复绑事件的麻烦。

// 事件绑定在table元素上，自动适配后续动态生成的行
document.querySelector('table').addEventListener('click', function(e) {
  // 判断点击目标是不是detail类按钮
  if (e.target.classList.contains('detail')) {
    // 定位按钮所在的最近tr行
    const row = e.target.closest('tr');
    // 直接拿到行内匹配id类的单个DOM元素，不再是类数组集合
    const idEl = row.querySelector('.id');
    // 读取对应文本值
    const value = idEl.innerText;
    console.log(value); // 正常输出对应行的123/456
  }
})

注意：如果连table元素本身都是后续动态生成的、初始加载时不存在于DOM中，直接把事件绑定到document根节点上即可，内部的按钮判断、取值逻辑完全不需要改动。

内容的提问来源于stack exchange，提问作者Chow Wen Keat