如何仅当目标td及相邻td满足文本条件时为其添加class（不可修改原代码）

可以通过客户端JavaScript实现需求，无需修改原始HTML代码，具体实现如下：

代码实现 #

document.addEventListener('DOMContentLoaded', () => {
  // 遍历所有<tr>中的第一个<td>元素
  document.querySelectorAll('tr td:first-child').forEach(td => {
    // 条件1：当前<td>的文本为目标数字（示例为"2"，如需包含匹配可改为includes("2")）
    if (td.textContent.trim() === "2") {
      const nextTd = td.nextElementSibling;
      // 条件2：相邻下一个<td>包含指定文本（示例为"6oz"）
      if (nextTd && nextTd.textContent.includes("6oz")) {
        // 添加自定义class，这里命名为"qualified-item"
        td.classList.add('qualified-item');
      }
    }
  });

  // 统计符合条件的单元总数
  const totalQualified = document.querySelectorAll('td.qualified-item').length;
  console.log(`符合条件的单元总数：${totalQualified}`);
});

关键逻辑说明 #

• document.querySelectorAll('tr td:first-child')：精准选中所有表格行的第一个<td>，覆盖页面中所有<tr>元素
• textContent.trim()：去除文本前后空白，避免因换行或空格导致匹配失败
• nextElementSibling：获取当前<td>的下一个同级元素，确保是目标相邻<td>
• textContent.includes("6oz")：忽略内部嵌套标签，直接检查整个<td>的文本内容是否包含指定字符串
• 最后通过querySelectorAll统计添加了目标class的元素数量，可按需将结果展示在页面或输出到控制台

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