原生js创建一个20*20的网格

学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>网格创建</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    table {
        border-collapse: collapse;

    }

    td {
        width: 20px;
        height: 20px;
        border: 1px solid #333;

    }
    </style>
</head>

<body>
</body>
<script>

//创建table标签
let table = document.createElement('table');
for (let i = 0; i < 20; i++) {
    (function() {
        //自调用函数，执行一次的效果等同于table>tr>td*10
        //外层循环结束，20*20的网格创建完毕
        let tr = document.createElement('tr');
        for (let i = 0; i < 20; i++) {
            tr.appendChild(document.createElement('td'));
            table.appendChild(tr);
        }
        document.querySelector("body").appendChild(table);
    })()
}
</script>

</html>

效果图

在这里插入图片描述

来源：CSDN

作者：_冷月心

链接：https://blog.csdn.net/qq_42813491/article/details/90736330

标签

js代码

table

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!