获取点击HTML表格单元格值及对应列(th)ID的代码问题求助

问题根源 #

原代码里document.getElementById('NGTable1 th')写法错误：getElementById仅能接收单个ID字符串，无法识别复合CSS选择器，导致TTH变量拿到的是null，自然无法调用forEach方法。

修复方案1：修正选择器并保留循环逻辑 #

把错误的选择器替换为document.querySelectorAll('#NGTable1 th')，它能正确获取表格#NGTable1下的所有<th>元素，返回的NodeList支持forEach（现代浏览器兼容）。同时优化变量声明避免全局污染：

function onTableCellClicked(e){
  if(e.target.innerHTML && window.chrome.webview){
    const cellIndex = e.target.cellIndex;
    let msg = e.target.innerHTML;
    const tableHeaders = document.querySelectorAll('#NGTable1 th');
    tableHeaders.forEach(th => {
      if (th.cellIndex === cellIndex) {
        msg += `|${th.id}`;
      }
    });
    window.chrome.webview.postMessage(msg);
  }
}

修复方案2：直接通过索引定位（更高效） #

既然已经拿到单元格的cellIndex，可以直接用索引获取对应列的<th>，无需遍历所有表头，代码更简洁高效：

function onTableCellClicked(e){
  if(e.target.innerHTML && window.chrome.webview){
    const cellIndex = e.target.cellIndex;
    let msg = e.target.innerHTML;
    const targetTh = document.querySelectorAll('#NGTable1 th')[cellIndex];
    if(targetTh){
      msg += `|${targetTh.id}`;
    }
    window.chrome.webview.postMessage(msg);
  }
}

兼容老浏览器提示 #

如果需要兼容不支持NodeList.forEach的旧浏览器，可将NodeList转为数组后再循环：

Array.from(document.querySelectorAll('#NGTable1 th')).forEach(th => {
  // 循环逻辑
});

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