本文讲解如何根据 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 可能包含换行符或空格（如 “Bluen”），直接比较会导致匹配失败 —— 务必使用 .trim()；
- ❌ 缺少容错机制：当单元格为空或值不匹配时，应有默认反馈，避免静默失败。
? 进阶建议（可选优化）
- 支持大小写不敏感匹配：可将 colorValue.toLowerCase() 后比对 “blue” / “red”；
- 从数据属性读取 URL：将跳转地址存于
中，提升可维护性； - 添加加载状态：点击后禁用按钮并显示 loading 文字，防止重复提交；
- 兼容性保障：本方案支持所有现代浏览器及 IE9+，无需额外 polyfill。
只要确保目标
具有唯一 ID（如 id=”colortype”），且脚本在 dom 加载完成后执行（本例中因按钮内联 onclick，已天然满足），即可稳定运行。这是轻量、清晰、生产就绪的条件跳转实践方案。