JS-学生信息表录入删除功能（本地存储）

一个大萝北

已于 2022-11-01 21:59:48 修改

阅读量755

点赞数 3

分类专栏： # 原生JavaScript 文章标签： javascript css 前端

于 2022-11-01 21:37:25 首次发布

本文链接：https://blog.csdn.net/qq_40797578/article/details/127641643

版权

原生JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

功能：学生信息表录入、删除（本地存储）

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

        a {
            text-decoration: none;
            color: #721c24;
        }

        h1 {
            text-align: center;
            color: #333;
            margin: 20px 0;

        }

        table {
            margin: 0 auto;
            width: 800px;
            border-collapse: collapse;
            color: #004085;
        }

        th {
            padding: 10px;
            background: #cfe5ff;

            font-size: 20px;
            font-weight: 400;
        }

        td,
        th {
            border: 1px solid #b8daff;
        }

        td {
            padding: 10px;
            color: #666;
            text-align: center;
            font-size: 16px;
        }

        tbody tr {
            background: #fff;
        }

        tbody tr:hover {
            background: #e1ecf8;
        }

        .info {
            width: 900px;
            margin: 50px auto;
            text-align: center;
        }

        .info input,
        .info select {
            width: 80px;
            height: 27px;
            outline: none;
            border-radius: 5px;
            border: 1px solid #b8daff;
            padding-left: 5px;
            box-sizing: border-box;
            margin-right: 15px;
        }

        .info button {
            width: 60px;
            height: 27px;
            background-color: #004085;
            outline: none;
            border: 0;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
        }

        .info .age {
            width: 50px;
        }
    </style>
</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>
        </tbody>
    </table>


    <script>
        const info = document.querySelector('.info')
        const add = document.querySelector('.add')
        let sId = 0
        let arr = []
        // 1.载入本地存储
        // 先让数租获得本地存储的数组，要用JSON转换为字符串
        arr = JSON.parse(localStorage.getItem('studentInfo'))
        // 需要进行非空判断，否则会报错后面的录入不进去
        arr = arr === null ? [] : JSON.parse(localStorage.getItem('studentInfo'))  
        render(arr)

        // 2.给button添加点击事件
        add.addEventListener('click', function (e) {
            //阻止表单默认行为
            e.preventDefault()
            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
            // 非空判断
            if (uname.length === 0 || age.length === 0 || salary.length === 0) {
                return alert('不能为空')
            }
            console.log(arr.length);
            // 让学号=数组最后一个sid+1 
            let sId = arr.length === 0 ? 1 : arr[arr.length - 1].sId+1
            let obj = {
                sId: sId,
                uname: uname,
                age: age,
                gender: gender,
                salary: salary,
                city: city
            }
            arr.push(obj)
            console.log(arr);
            // 渲染数据
            render(arr)
            // 送入数据后表单清空 用表单的重置方法
            info.reset()
            //将arr存入本地存储
            localStorage.setItem('studentInfo', JSON.stringify(arr))
        })

    
        // 渲染函数：render
        function render(arr) {
            let newArr = arr.map(function (item, index) {
                return `
                <tr>
                    <td>${item.sId}</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> 
                `
            })
            document.querySelector('tbody').innerHTML = newArr.join('')
        }

        // 3.删除功能 用事件委托（因为要每个新增项都能删除，不能用循环监听，只能用事件委托）
        document.querySelector('tbody').addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                let index = e.target.dataset.index
                arr.splice(index, 1)
                render(arr)
                localStorage.setItem('studentInfo', JSON.stringify(arr))
            }
        })


    </script>
</body>

</html>

做题注意点总结：

1.取出本地存储数据时要进行非空判断（null），为空时arr=[ ] 否则为存储的数据（要用JSON转换为字符串）JSON.parse(localStorage.getItem(‘studentInfo’))
2.要阻止表单默认行为 e.preventDefault()
3.要删除其中一项时，不能利用循环注册监听事件，否则后面新增的没效果。只能用事件委托，把点击事件交给父元素，利用冒泡原理监听删除按钮。
4.删除时寻找删除的哪一项，需要给点击的那个元素添加自定义属性，如data-index，并在map中把Index也就是存储的数组中的对象的索引给它，这样就能找到删除的哪一项，用e.target.setdata.index 找到索引
5.删除后要重新存储本地数据，因为本地数据不能单独提取删除，只能整体重新录入。
6.删除再添加会出现bug:添加的sid会重复。解决：sid不设置为arr.length，设置为数组最后一项的sid+1，（数组最后一项：arr[arr.length-1]）需要判断arr.length长度是否为0 是的就给初始值1,否则为arr[arr.length-1].sid+1