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

功能:学生信息表录入、删除(本地存储)

<!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

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
可以的,下面是一个示例代码,展示了如何使用HTML、CSSJavaScript来实现你所描述的功能: ```html <!DOCTYPE html> <html> <head> <title>学生信息</title> <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } form { margin-bottom: 10px; } input[type="text"], input[type="number"] { padding: 5px; width: 200px; } input[type="submit"] { padding: 5px 10px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; } </style> </head> <body> <h2>学生信息</h2> <form id="studentForm"> <label for="name">姓名:</label> <input type="text" id="name" required> <label for="age">年龄:</label> <input type="number" id="age" required> <label for="grade">年级:</label> <input type="text" id="grade" required> <input type="submit" value="添加学生"> </form> <input type="text" id="searchInput" placeholder="搜索学生"> <button onclick="searchStudents()">搜索</button> <table id="studentTable"> <tr> <th>姓名</th> <th>年龄</th> <th>年级</th> <th>操作</th> </tr> </table> <script> // 获取单和格 const studentForm = document.getElementById('studentForm'); const studentTable = document.getElementById('studentTable'); // 添加学生到格和 Local Storage studentForm.addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('name').value; const age = document.getElementById('age').value; const grade = document.getElementById('grade').value; // 创建新行并插入格 const newRow = studentTable.insertRow(-1); newRow.innerHTML = `<td>${name}</td><td>${age}</td><td>${grade}</td><td><button onclick="deleteStudent(this)">删除</button></td>`; // 清空单输入 document.getElementById('name').value = ''; document.getElementById('age').value = ''; document.getElementById('grade').value = ''; // 保存学生信息到 Local Storage saveToLocalStorage(name, age, grade); }); // 从 Local Storage 加载学生信息格 window.addEventListener('load', function() { const students = JSON.parse(localStorage.getItem('students')) || []; for (const student of students) { const newRow = studentTable.insertRow(-1); newRow.innerHTML = `<td>${student.name}</td><td>${student.age}</td><td>${student.grade}</td><td><button onclick="deleteStudent(this)">删除</button></td>`; } }); // 删除学生 function deleteStudent(button) { const row = button.parentNode.parentNode; row.parentNode.removeChild(row); const students = JSON.parse(localStorage.getItem('students')) || []; const name = row.cells[0].innerText; const age = row.cells[1].innerText; const grade = row.cells[2].innerText; // 从 Local Storage 中移除学生信息 const updatedStudents = students.filter(student => student.name !== name || student.age !== age || student.grade !== grade); localStorage.setItem('students', JSON.stringify(updatedStudents)); } // 搜索学生 function searchStudents() { const searchInput = document.getElementById('searchInput').value.toLowerCase(); const rows = studentTable.getElementsByTagName('tr'); for (let i = 1; i < rows.length; i++) { const name = rows[i].cells[0].innerText.toLowerCase(); const age = rows[i].cells[1].innerText.toLowerCase(); const grade = rows[i].cells[2].innerText.toLowerCase(); if (name.includes(searchInput) || age.includes(searchInput) || grade.includes(searchInput)) { rows[i].style.display = ''; } else { rows[i].style.display = 'none'; } } } // 保存学生信息到 Local Storage function saveToLocalStorage(name, age, grade) { const students = JSON.parse(localStorage.getItem('students')) || []; students.push({ name, age, grade }); localStorage.setItem('students', JSON.stringify(students)); } </script> </body> </html> ``` 这段代码创建了一个包含添加、删除和搜索功能的学生信息应用程序。它使用了HTML来定义页面布局,CSS来设置样式,JavaScript来处理交互和存储数据。学生信息会被保存在 Local Storage 中,并以格的形式显示在页面上。你可以在格中进行搜索,并且可以删除特定的学生信息

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一个大萝北

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值