学生信息表【录入、删除数据】_大数据应用学生信息表空值删除代码?-CSDN博客

本文链接：https://blog.csdn.net/lxllxl211/article/details/129243428

该网页是一个学员信息录入系统，用户可以输入姓名、年龄、性别、薪资和就业城市等信息，点击录入按钮将数据保存在内存中的数组。系统还实现了数据渲染功能，将已录入的信息展示在就业榜表格中，并提供删除功能。当点击删除链接时，对应的数据会从数组中移除并更新表格显示。

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

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        .newAdd {
            width: 800px;
            height: 110px;
            text-align: center;
            margin: 0 auto;
        }

        .newAdd h2 {
            padding: 10px;
        }

        .newAdd .info input {
            width: 60px;
            outline: none;
        }

        /* 就业榜 */
        .employment {
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        .employment th,
        .employment td {
            padding: 5px 10px;
        }

        .employment caption {
            padding: 10px;
            font-weight: 700;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <form class="newAdd" autocomplete="off">
        <h2>新增学员</h2>
        <div class="info">
            姓名：<input type="text" class="uname" name="">
            年龄：<input type="text" class="age" name="">
            性别：<select name="" id="" class="sex" name="">
                <option value="男" selected>男</option>
                <option value="女">女</option>
            </select>
            薪资：<input type="text" class="salary" name="">
            就业城市：<select name="" id="" class="city" name="">
                <option value="北京" selected>北京</option>
                <option value="河南">河南</option>
                <option value="河北">河北</option>
                <option value="南京">南京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="盛京">盛京</option>
            </select>
            <button>录入</button>
        </div>
    </form>

    <!-- 就业榜 -->
    <table class="employment" border="1" cellpadding="10" cellspacing="0">
        <caption>就业榜</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td> -->
            </tr>
        </tbody>
    </table>

    <script>
        // 0.获取属性值
        const uname = document.querySelector('.uname');
        const age = document.querySelector('.age');
        const sex = document.querySelector('.sex');
        const salary = document.querySelector('.salary');
        const city = document.querySelector('.city');
        const tbody = document.querySelector('.employment tbody');

        // 声明一个空的数组，删除和增加都是对这个数组进行操作
        const arr = [];
        // 1.录入模块
        // 1.1表单提交事件
        const newAdd = document.querySelector('.newAdd');
        console.log(newAdd);
        newAdd.addEventListener('submit', function (e) {
            // 阻止默认事件 阻止跳转 否则就会直接跳转
            e.preventDefault();

            // 最后----输入内容不能为空
            const item = document.querySelectorAll('[name]');
            for (let i = 0; i < item.length; i++) {
                // 这个空是 '' **************************
                if (item[i].value === '') {
                    return alert('输入内容不能为空');
                }
            }

            // 新建一个对象，用于接受 获取的属性值
            const obj = {
                xuHao: arr.length + 1,
                uname: uname.value,
                age: age.value,
                sex: sex.value,
                salary: salary.value,
                city: city.value,
            }
            // 把对象追加到这个数组里
            arr.push(obj);
            console.log(arr);

            // 重置表单*******************
            newAdd.reset();
            // 调用渲染函数
            reder();
        })

        //渲染函数 
        function reder() {
            // 每次渲染之前先清空原来的数据
            // 清空**************************************
            tbody.innerHTML = '';
            for (let i = 0; i < arr.length; i++) {
                // 每次循环都要新建立一个tr
                const tr = document.createElement('tr');
                tr.innerHTML = `
                <td>${arr[i].xuHao}</td>
                <td>${arr[i].uname}</td>
                <td>${arr[i].age}</td>
                <td>${arr[i].sex}</td>
                <td>${arr[i].salary}</td>
                <td>${arr[i].city}</td>
                <td><a href="#" data-id=${i}>删除</a></td>
                `;
                // 追加
                tbody.appendChild(tr);
            }
        }

        // 删除数据
        // 1.获取对应的A
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName = "A") {
                // 输出对应的id
                //console.log(e.target.dataset.id);
                // 删除对应id的数组对象
                arr.splice(e.target.dataset.id, 1);

                // 重新渲染页面，否则页面不会变化
                reder();
            }
        })
    </script>
</body>

</html>

在这里插入图片描述