练习-动态生成表格存储学生信息

最新推荐文章于 2023-01-17 14:15:29 发布

阿门阿前下的蜗牛

最新推荐文章于 2023-01-17 14:15:29 发布

阅读量619

点赞数 2

分类专栏：前端练习

本文链接：https://blog.youkuaiyun.com/Fky_mie/article/details/114659899

版权

前端同时被 2 个专栏收录

41 篇文章

订阅专栏

练习

9 篇文章

订阅专栏

该博客主要介绍了如何动态生成表格来存储学生信息，包括姓名、科目和成绩。内容涵盖了在已有信息基础上进行增删操作的方法，并提供了JS实现的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

练习-动态生成表格存储学生信息

要求:

Part1:

输入学生的姓名/科目/成绩, 动态生成表格
当已有多个学生信息时, 一次导入生成表格
每一项学生信息, 都有删除选项

在这里插入图片描述

基本样式:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>

JS如下:

// 1.先去准备好学生的数据, 存放为数组>对象形式
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];

 // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
            // 1. 创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
            for (var k in datas[i]) { // 里面的for循环管列 td
                // 创建单元格 
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td  
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            // 3. 创建有'删除'2个字的单元格 
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除 </a>';
            tr.appendChild(td);

        }

// 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
                tbody.removeChild(this.parentNode.parentNode)
            }
        }

Part2:

在已有项目上修改: 可以输入学生信息

在这里插入图片描述

<!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>动态生成表格</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            /* 为表格设置合并边框模型 */
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
        
        .input-index {
            max-width: 630px;
            margin: 50px auto;
        }
    </style>
</head>
<!-- 项目要求: 1.表格显示学生姓名,科目,成绩, 附带删除此行的功能; 2. 构造函数生成对象 -->

<body>
    <table cellspacing="0">
        <!-- 去掉表格默认间距 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr></tr>
        </tbody>
    </table>
    <div class="input-index">
        <input type="text" class="newName">姓名
        <input type="text" class="newSub">科目
        <input type="text" class="newScore">成绩
        <button>提交</button>
    </div>
    <script>
        //构造对象
        function Student(newName, newSub, newScore) {
            this.name = newName;
            this.subject = newSub;
            this.score = newScore;
        }

        var tbody = document.querySelector('tbody');
        var btn = document.querySelector('button');

        // 按下按键下方出现新行,包括以下几步
        btn.onclick = function() {
            // 1. 获取输入的学生信息
            var student = new Student(document.querySelector('.newName').value, document.querySelector('.newSub').value, document.querySelector('.newScore').value);
            //2. 新建tr类型的元素(新行)-插入成tbody子元素
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //3. 新行里用td单元格存储学习三个信息
            for (var k in student) { //  遍历student对象的key名
                //3.1 新建td类型元素
                var td = document.createElement('td');
                //3.2 把student对象的属性值对应给td
                // 错误示范:
                // td = student[k]; //把节点类型td变成字符串类型后,无法用appendChild
                td.innerHTML = student[k];
                console.log(td);
                tr.appendChild(td);
            }

            //4. 最后一part, 可有可无吧, 添加删除单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);

            //5. 给<a href="javascript:;">删除</a>单元格添加点击选项
            //要点: 删除a所在的行(tr>td>a), 删除节点只能从父节点删除其子节点,所以是从a的曾爷爷节点删除a的爷爷节点,即从tbody删除a所在的tr
            var as = document.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function() {
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
        }
    </script>
</body>
</html>