jQuery 点击表格<td>元素时如何正确获取同列表头<th>的文本值

原代码取不到值的核心原因 #

• 查找路径完全跑偏：原代码写的是从当前点击td的父级<tr>内部，找嵌套表格的<th>元素，但示例里的表格根本没有嵌套结构，所有表头都在同一个表格的<thead>区域，这么找自然只能拿到空文本。
• 没做列位置匹配：就算找对了表头的存放位置，也不知道该取哪一列的表头，根本没建立点击单元格和对应列的关联。

正确的实现思路 #

1. 触发点击事件时，先算出当前点击的td，是它所在行里的第几个单元格（列索引从0开始计数）
2. 拿这个索引值，去<thead>的那一行里找同序号的th
3. 把这个th的文本清掉前后多余的空格，输出到控制台即可

修正后的完整代码 #

$('#tab tbody tr td').on('click', function() {
  // 获取当前点击单元格的列序号
  const colIndex = $(this).index();
  // 匹配对应列的表头文本，去掉多余换行和缩进
  const headerText = $('#tab thead tr th').eq(colIndex).text().trim();
  console.log(headerText);
});

注意事项 #

• 这套逻辑刚好适配当前这个没有合并单元格的标准表格，如果后续表格加了跨列、跨行的合并单元格，需要额外计算合并带来的列偏移，才能保证索引匹配不出错。
• 加trim()处理是因为HTML示例里的th标签前后都带换行、缩进，不处理的话取到的文本会夹很多多余空格，展示效果不干净。

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