本文讲解如何根据 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>⚠️ 原代码常见错误解析
? 进阶建议（可选优化）
中，提升可维护性；
具有唯一 ID（如 id="colortype"），且脚本在 DOM 加载完成后执行（本例中因按钮内联 onclick，已天然满足），即可稳定运行。这是轻量、清晰、生产就绪的条件跳转实践方案。
