原生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>

效果图

在这里插入图片描述

发布了450 篇原创文章 · 获赞 787 · 访问量 16万+

猜你喜欢

转载自blog.csdn.net/qq_42813491/article/details/90736330
今日推荐