whitevil 2021-05-29 21:29 采纳率: 100%
浏览 65
已采纳

js自带生成表格没生效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

    </head>
    <style type="text/css">
        body {
            text-align: center;
        }
    </style>
    <body>
        <div id="box1">
            行数:
            <input type="text" id="rows" />
            <br />
            列数:
            <input type="text" id="cols" />
            <br>
            <button type="button" id="btn01">输出</button>
        </div>
        <div id="box2">
            <table border="" cellspacing="" cellpadding="">
                <tr><th>Header</th></tr>
                <tr><td>Data</td></tr>
            </table>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                //创建一个单击响应函数
                //需求是获取一个按钮的id,然后绑定一个函数,那么参数就有两个一个是id一个是函数
                
                myClick("btn01", function() {
                    var rows = document.getElementById("rows").value;
                    var cols = document.getElementById("cols").value;
                    var table = document.getElementsByTagName("table")[0];

                    for (var i = 0; i < rows; i++) {
                        var tr = document.createElement("tr");
                        for (var j = 0; j < cols; j++) {
                            var td = document.createElement("td");
                            tr.appendChild(td);
                        }
                        table.appendChild(tr);
                    }

                });
                
                function myClick(idStr, fun) {
                    var btn = document.getElementById(idStr);
                    btn.onclick = fun();
                }
                
            };
        </script>
    </body>
</html>

 

代码如上,反反复复看了好多遍,始终没有找到问题

  • 写回答

3条回答 默认 最新

  • 崽崽的谷雨 2021-05-30 02:13
    关注

    你这个点击事件没绑定上，只有第一次进来运行了，你可以在myclick里console一个值，会发现点击输出不管用。因为第一次没给行数和列数所以不管用。可以参考我这个

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

</head>
<style type="text/css">
    body {
        text-align: center;
    }
</style>

<body>
    <div id="box1">
        行数:
        <input type="text" id="rows" />
        <br /> 列数:
        <input type="text" id="cols" />
        <br>
        <button type="button" id="btn01">输出</button>
    </div>
    <div id="box2">
        <table border="" cellspacing="" cellpadding="">
            <tr>
                <th>Header</th>
            </tr>
            <tr>
                <td>Data</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            //创建一个单击响应函数
            //需求是获取一个按钮的id,然后绑定一个函数,那么参数就有两个一个是id一个是函数
            var btn = document.getElementById("btn01");
            btn.addEventListener("click", () => {
                    myClick();
                })
                // myClick("btn01", function() {
                //     console.log("999")
                //     var rows = document.getElementById("rows").value;
                //     var cols = document.getElementById("cols").value;
                //     var table = document.getElementsByTagName("table")[0];

            //     for (var i = 0; i < rows; i++) {
            //         var tr = document.createElement("tr");
            //         for (var j = 0; j < cols; j++) {
            //             var td = document.createElement("td");
            //             tr.appendChild(td);
            //         }
            //         table.appendChild(tr);
            //     }

            // });

            function myClick() {
                var rows = document.getElementById("rows").value;
                var cols = document.getElementById("cols").value;
                var table = document.getElementsByTagName("table")[0];

                for (var i = 0; i < rows; i++) {
                    var tr = document.createElement("tr");
                    for (var j = 0; j < cols; j++) {
                        var td = document.createElement("td");
                        tr.appendChild(td);
                    }
                    table.appendChild(tr);
                }

            }

        };
    </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 BP神经网络控制倒立摆
  • ¥20 要这个数学建模编程的代码 并且能完整允许出来结果 完整的过程和数据的结果
  • ¥15 html5+css和javascript有人可以帮吗？图片要怎么插入代码里面啊
  • ¥30 Unity接入微信SDK 无法开启摄像头
  • ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
  • ¥20 cad图纸，chx-3六轴码垛机器人
  • ¥15 移动摄像头专网需要解vlan
  • ¥20 access多表提取相同字段数据并合并
  • ¥20 基于MSP430f5529的MPU6050驱动，求出欧拉角
  • ¥20 Java-Oj-桌布的计算