JS生成HTML按钮表格：页面加载直接跳转目标页的异常求助

嘿，我完全懂你碰到的这个坑！你说页面一加载就直接跳转到目标页，根本看不到你创建的按钮表格，核心问题出在按钮点击事件的绑定方式上——你大概率是在创建按钮的时候直接执行了跳转代码，而不是把跳转逻辑绑定到点击事件上。

问题根源 #

举个例子，如果你写了类似下面的代码：

button.onclick = window.location.href = "目标页面.html";

这种写法会在按钮被创建的瞬间就直接执行window.location.href的赋值操作，触发页面跳转，而不是等用户点击按钮才执行。

正确的实现方式 #

你需要把跳转逻辑包装成一个函数，绑定到按钮的onclick事件上，或者使用addEventListener来添加点击监听。下面是修正后的完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>按钮表格示例</title>
</head>
<body onload="tabla()">
    <script>
        function tabla() {
            // 创建表格
            var x = document.createElement("TABLE");
            x.setAttribute("id", "miTabla");
            document.body.appendChild(x);

            // 示例：创建2行3列的按钮表格
            for (var i = 0; i < 2; i++) {
                var row = x.insertRow(i);
                for (var j = 0; j < 3; j++) {
                    var cell = row.insertCell(j);
                    var btn = document.createElement("BUTTON");
                    // 给按钮设置唯一ID
                    btn.setAttribute("id", `btn-${i}-${j}`);
                    btn.textContent = `按钮 ${i+1}-${j+1}`;
                    
                    // 方式1：绑定onclick事件，包装跳转逻辑为函数
                    btn.onclick = function() {
                        // 这里替换成你的目标页面地址
                        window.location.href = "目标页面.html";
                    };

                    // 方式2：使用addEventListener（更推荐，支持绑定多个事件）
                    // btn.addEventListener("click", function() {
                    //     window.location.href = "目标页面.html";
                    // });

                    cell.appendChild(btn);
                }
            }
        }
    </script>
</body>
</html>

扩展优化：不同按钮跳转不同页面 #

如果每个按钮需要跳转到不同页面，可以通过按钮的自定义属性来区分，示例如下：

// 创建按钮时添加自定义跳转地址属性
btn.setAttribute("data-url", `页面${i+1}-${j+1}.html`);
// 点击时读取属性完成跳转
btn.addEventListener("click", function() {
    window.location.href = this.getAttribute("data-url");
});

这样修改后，页面加载时会先执行tabla函数渲染出按钮表格，只有当你点击任意按钮时，才会触发跳转逻辑啦！

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