利用JavaScript生成点名册

执手天涯@

于 2021-10-12 21:37:40 发布

阅读量548

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/m0_37911124/article/details/120732816

版权

需求：动态生成一个M*N的表格，点击可以跳转到详情页

一、创建对应的html文件

<body>
    <!-- 用来接收用户输入的行的数据 -->
    <input type="text" value="5" placeholder="请输入行数" id="rows">
    <!-- 用来接收用户输入的列的数据 -->
    <input type="text" value="5" placeholder="请输入列数" id="cols">
    <!-- 创建一个按钮 onclick表示一个点击事件后面会用到 -->
    <input type="button" value="创建表格" onclick="creatTab()">
    <!-- 创建一个div来存放创建的表格 -->
    <div id="bigbox">
    </div>

</body>

二、JavaScript代码

<script>
    // 获取相关的元素
    var rows = document.getElementById("rows");
    var cols = document.getElementById("cols");
    var div = document.getElementById("bigbox");
    // 利用js创建一个按钮
    var anniu = document.createElement("button")
    // 创建一个函数来生成表格
    function creatTab() {
        // 先声明一个全局的tab 表示表格的开始标签
        var tab = "<table border='1px' width='600px' cellspacing='0'>"
            // 先写一个for循环表示控制行数
        for (var i = 0; i < rows.value; i++) {
            // 在表格内部加上行的开始标签
            tab = tab + "<tr>";
                // 内层循环控制列的数目
            for (var j = 0; j < cols.value; j++) {
                // 设置td的内容并跳转到详情页面<a href="./hello.html">查看</a>表示跳转的页面
                tab += "<td>" + i + j + '<a href="./hello.html">查看</a>' + "</td>";
            }
            // 加上行的结束标签
            tab += "<tr/>";
        }
        // 加上表格的结束标签
        tab += '</table>';
        // 将创建好的表格添加到对应的div中
        div.innerHTML = tab;
    }
</script>