如何使用Javascript在HTML表格<tr>中查找表头Group1实现交互校验

首先注意你给出的表格结构中，首行表头里的Group1是放在<td>标签而非<th>标签里的，所以查找时需要同时覆盖<th>和<td>两种标签，具体实现代码如下：

// 定位表格首行
const headerRow = document.querySelector('#tableid tbody tr:first-child');
// 检查首行所有单元格是否存在Group1，trim方法用于消除多余空格导致的匹配误差
const hasGroup1 = Array.from(headerRow.querySelectorAll('th, td')).some(cell => {
  return cell.textContent.trim() === 'Group1';
});

// 替换下方的按钮选择器为你实际需要禁用的按钮对应选择器
const targetBtn = document.querySelector('#你的按钮ID');
if (hasGroup1) {
  // 原生禁用按钮点击
  targetBtn.disabled = true;
  // 可选：添加禁用样式提示用户
  targetBtn.style.opacity = '0.6';
  targetBtn.style.cursor = 'not-allowed';
  // 兜底拦截点击事件，避免部分场景下disabled属性不生效
  targetBtn.addEventListener('click', e => {
    e.preventDefault();
    e.stopPropagation();
  }, { capture: true });
}

逻辑说明 #

• 首先通过选择器定位到表格的第一行表头行
• 遍历该行所有的表头、单元格标签，校验文本内容是否完全匹配Group1
• 匹配到目标内容后，除了设置原生disabled属性禁用按钮外，额外添加了点击事件拦截做兜底，同时支持自定义禁用样式提升用户体验

内容的提问来源于stack exchange，提问作者WEI ZHUANG GOH