JavaScript小案例——自动生成表格

最新推荐文章于 2024-07-19 12:58:53 发布

momo不吃辣

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量798

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_54645034/article/details/128510961

版权

进一步练手js的节点操作，自动生成表格就是一个很好的小例子。

摘要由CSDN通过智能技术生成

自动生成表格跟符合实际开发中的应用场景，根据准备好的内容或者传输的内容，让网页自动填充和生成样式，是一个创建和添加节点的操作。

案例分析：

1.因为里面的数据是动态的，我们需要js动态生成，这里我们模拟数据，自己定义好数据，数据我们采取对象形式存储

2.所有的数据都在tbody里面

3.因为有很多行，我们需要循环创建多个行（对应多个人）

4.每一行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并把数据存在里面

5.最后一列单元格时删除，需要单独创建单元格

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;