学生信息表案例(web apis 事件驱动)

最新推荐文章于 2026-04-12 11:55:20 发布

原创最新推荐文章于 2026-04-12 11:55:20 发布 · 306 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

知识点

这是一个使用JavaScript实现的学生信息管理系统，包括新增学员、数据验证、本地存储以及删除功能。用户可以输入学生姓名、年龄、性别、薪资和就业城市，信息会被存储并显示在就业榜上。同时，提供了删除功能，用户确认后可从列表中移除相应学生信息。

//思路推理
	// 1, 创建一个数组 (如果有本地数据则取本地,没有的话为空)
	// 2, 给form创建一个submit注册事件
	// 3, 非空提示
	// 4, 获取各项数据dom对象
	// 5, 构建对象
	// 6, 将对象push到数组中
	// 7, 将数组转换为字符串形式,保存在本地储存中
	// 8, 渲染新的数组渲染到页面
	// 9, 利用事件委托删除a标签


<!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>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
        姓名：<input type="text" class="uname" name="uname" />
        年龄：<input type="text" class="age" name="age" />
        性别:
        <select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资：<input type="text" class="salary" name="salary" />
        就业城市：<select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="曹县">曹县</option>
        </select>
        <button class="add">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
        </tbody>
    </table>

    <script>
        // 先在本地储存中,看看是否有想要的数据  如果有 就将其取出来,通过JSON格式的字符串  再将其转换为数租  如果没有想要的数据的话,则是一个空数组
        const arr = JSON.parse(localStorage.getItem('stu')) || []
        console.log(arr)

        //当点击 提交按钮时,获取数据

        // 1, 给class = 'info' dom元素 绑定submit事件 
        document.querySelector('.info').addEventListener('submit', function (e) {

            // 2, 阻止默认行为
            e.preventDefault()
            // 3, 获取对应输入框的数据
            const uname = document.querySelector('.uname').value.trim()
            const age = document.querySelector('.age').value.trim()
            const gender = document.querySelector('.gender').value
            const salary = document.querySelector('.salary').value.trim()
            const city = document.querySelector('.city').value
            // 4, 非空判断
            if (uname.length === 0 || age.length === 0 || salary.length === 0) {
                alert('内容未齐全')
            }
            // 5, 构建对象
            const obj = {
                //如果数组里面有元素, 从数组里面 找到最后一个元素的id +1 ,如果没有 给一个默认值
                id: arr > 0 ? arr[arr.length - 1].id + 1 : 1,
                uname: uname,
                age: age,
                gender: gender,
                salary: salary,
                city: city
            }
            // 6, 将对象 push到数租中
            arr.push(obj)
            // 7,将数租转换为JSON格式的字符串 存储到本地存储中
            localStorage.setItem('stu', JSON.stringify(arr))
            //调用rander 函数 添加数据,立马渲染 
            render(arr)
            //清空表单
            this.reset()
        })

        // 定义render的函数 用于渲染数据
        function render(data) {
           const newArr = data.map(function (item, index) {
                return `
                <tr>
          <td>${item.id}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-index = "${index}">删除</a>
          </td>
        </tr> 
                `
            })
            //将数租 转换为字符串 写入到tbody 中
            document.querySelector('tbody').innerHTML = newArr.join('')
        }
        //打开浏览器时,有数据就直接渲染 
        render(arr)

        //点击删除a标签时,需要将数租里面对应的数据删除,需要再次将最新的数据写入到本地存储中,最后渲染
        document.querySelector('tbody').addEventListener('click', function (e) {
            //确定点击的a标签
            if (e.target.tagName === 'A') {
                //获取自定义属性值
                const index = e.target.dataset.index
                // 确认是否删除
                if (confirm('确定要删除嘛?')) {
                    //删除数组里面对应的元素
                    arr.splice(index, 1)
                    //将最新的数据写入到本地存储中
                    localStorage.setItem('stu', JSON.stringify(arr))
                    //再次调用函数  重新渲染
                    render(arr)
                }
            }
        })
    </script>
</body>

</html>

标签

#大数据