本文讲解如何根据 html 表格中指定单元格的文本值（如“blue”或“red”），在点击按钮时自动跳转至不同目标页面，使用原生 javascript 实现简洁可靠的条件跳转逻辑。

本文讲解如何根据 html 表格中指定单元格的文本值（如“blue”或“red”），在点击按钮时自动跳转至不同目标页面，使用原生 javascript 实现简洁可靠的条件跳转逻辑。

在 Web 开发中，常需根据页面已有数据（如表格中的状态、类型或配置项）动态控制交互行为。一个典型场景是：按钮点击后，依据某单元格显示的值（例如颜色名称）跳转到对应页面。本教程将手把手带你实现这一功能——无需框架、不依赖外部库，纯原生 JavaScript + HTML 完成条件式页面跳转。

✅ 正确实现方式

核心思路是：将跳转逻辑封装为函数，并绑定到按钮的 onclick 事件；在函数内读取目标 的文本内容，通过条件判断决定跳转地址。

以下是完整可运行代码：

<table>
  <tr>
    <td><strong>TITLE</strong></td>
    <td id="colortype">Blue</td> <!-- 注意：移除 <br> 和冗余 type 属性 -->
  </tr>
</table>

<button class="btn" id="button" onclick="getColor()">Find Colors</button>

<script>
function getColor() {
  const colorCell = document.getElementById("colortype");
  const colorValue = colorCell.textContent.trim(); // .trim() 去除换行/空格干扰

  switch (colorValue) {
    case "Blue":
      location.href = "HTML1.html"; // 推荐使用带扩展名的相对路径
      break;
    case "Red":
      location.href = "HTML2.html";
      break;
    default:
      console.warn(`未知颜色值: "${colorValue}"，未执行跳转`);
      alert("未识别的颜色，请检查表格内容");
      break;
  }
}
</script>

⚠️ 原代码常见错误解析

你最初的脚本存在几个关键问题，需特别注意：

• ❌ document.getElementById("button").window.open(...) 语法错误：window.open 是全局方法，不应挂在元素上；且 open() 会新开窗口，而 location.href 才是当前页跳转的推荐方式；
• ❌ else (condition){...} 写法错误：else 后不能接条件表达式，应为 else if (...) 或改用 switch；
• ❌ 赋值误用：document.getElementById("button").onclick = 'HTML2' 将字符串赋给 onclick，而非函数，且未触发跳转；
• ❌ 未处理空白字符：.textContent 可能包含换行符或空格（如 "Blue\n"），直接比较会导致匹配失败 —— 务必使用 .trim()；
• ❌ 缺少容错机制：当单元格为空或值不匹配时，应有默认反馈，避免静默失败。

? 进阶建议（可选优化）

• 支持大小写不敏感匹配：可将 colorValue.toLowerCase() 后比对 "blue" / "red"；
• 从数据属性读取 URL：将跳转地址存于 中，提升可维护性；
• 添加加载状态：点击后禁用按钮并显示 loading 文字，防止重复提交；
• 兼容性保障：本方案支持所有现代浏览器及 IE9+，无需额外 polyfill。

只要确保目标

具有唯一 ID（如 id="colortype"），且脚本在 DOM 加载完成后执行（本例中因按钮内联 onclick，已天然满足），即可稳定运行。这是轻量、清晰、生产就绪的条件跳转实践方案。