网站导航
> 文章列表 > 学生就业统计表案例

学生就业统计表案例

网友: 文章列表 2024-03-22 02:54:21

学生就业统计表案例

主要分为三块：

  1. 渲染业务
  2. 新增业务
  3. 删除业务

在这里插入图片描述
在这里插入图片描述

一、根据持久化数据渲染页面
核心步骤:

  1. 读取localstorage 本地数据
  • 如果有数据则转换为对象放到变量里面一会使用它渲染页面
  • 如果没有则用默认空数组 []
  • 为了测试效果，咱们可以先把initData 存入本地存储看效果
  1. 根据数据渲染页面。遍历数组，根据数据生成 tr，里面填充数据最后追加给 tbody
  • 渲染业务要封装成一个函数 render
  • 我们使用map方法遍历数组，里面更换数据，然后会返回 有数据的 tr 数组
  • 通过join 方法把map返回的数组转换为字符串
  • 把字符串通过 innerHTML 赋值给 tbody

二、点击新增按钮，页面显示新的数据
核心步骤:

  1. 给form注册提交事件，要阻止默认提交事件(阻止默认行为)
事件对象.preventDefault() // 阻止默认行为

  1. 非空判断
    如果年龄、性别、薪资有一个值为空，则 return 返回“输入不能为空” 中断程序

  2. 给 arr 数组追加对象，里面存储表单获取过来的数据

  3. 渲染页面和重置表单(reset()方法)

  4. 把数组数据存储到本地存储里面，利用JSON.stringify()存储为JSON字符串

三、点击删除按钮，可以删除对应的数据
核心步骤：

  1. 采用事件委托形式，给tbody注册点击事件
  2. 得到当前点击的索引号。渲染数据的时候，动态给a链接添加自定义属性 data-id=“0"
  3. 根据索引号，利用 splice 删除数组这条数据
  4. 重新渲染页面
  5. 把最新 arr 数组存入本地存储

关于stuld 的处理
核心思路：新增加序号应该是最后一条数据的stuld + 1
即数组[数组的长度-1].stuld + 1

但是要判断，如果没有数据则是直接赋值为1，否则就采用上面的做法

<!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="./iconfont/iconfont.css"><link rel="stylesheet" href="css/index.css" />
</head><body><h1>学生就业统计表</h1><form class="info" autocomplete="off"><input type="text" class="uname" name="uname" placeholder="姓名" /><input type="text" class="age" name="age" placeholder="年龄" /><input type="text" class="salary" name="salary" placeholder="薪资" /><select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select><select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add"><i class="iconfont icon-tianjia"></i>添加</button></form><div class="title">共有数据<span>0</span>条</div><table><thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>录入时间</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1</td><td>迪丽热巴</td><td>23</td><td>女</td><td>12000</td><td>北京</td><td>2099/9/9 08:08:08</td><td><a href="javascript:"><i class="iconfont icon-shanchu"></i>删除</a></td></tr> --></tbody></table><script>// 参考数据const initData = [{stuId: 1,uname: '迪丽热巴',age: 22,salary: '12000',gender: '女',city: '北京',time: '2023/9/9 08:08:08'}]// localStorage.setItem('data',JSON.stringify(initData))// 1. 渲染业务// 1.1 先读取本地存储的数据// (1)本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面// (2)如果没有数据，则用 空数组来代替const arr = JSON.parse(localStorage.getItem('data')) || []// 1.2 利用map和join方法来渲染页面const tbody=document.querySelector('tbody')function render(){// (1)利用map遍历数组，返回对应的 tr的数组const trArr= arr.map(function(ele,index){return `<tr><td>${ele.stuId}</td><td>${ele.uname}</td><td>${ele.age}</td><td>${ele.gender}</td><td>${ele.salary}</td><td>${ele.city}</td><td>${ele.time}</td><td><a href="javascript:" data-id="${index}"><i class="iconfont icon-shanchu"></i>删除</a></td></tr>`})console.log(trArr)// (2)把数组转换为字符串join// (3)把生成的字符串追加给tbodytbody.innerHTML=trArr.join('')// 显示共有几条数据document.querySelector('.title span').innerHTML=arr.length}render()// 2. 新增业务const info=document.querySelector('.info')const uname=document.querySelector('.uname')const age=document.querySelector('.age')const salary=document.querySelector('.salary')const gender=document.querySelector('.gender')const city=document.querySelector('.city')// 2.1 form表单注册提交事件，阻止默认行为info.addEventListener('submit',function(e){e.preventDefault()// 2.2 非空判断 if(!uname.value || !age.value || !salary.value){return alert('输入内容不能为空')}// 2.3 给arr数组追加对象，里面存储表单获取过来的数据arr.push({// 处理stuId：数组最后一条数据的stuId + 1stuId: arr.length ? arr[arr.length-1].stuId+1 : 1,uname: uname.value,age: age.value,salary: salary.value,gender: gender.value,city: city.value,time: new Date().toLocaleString()})// 2.4 渲染页面和重置表单（reset（）方法）render()this.reset()  //重置表单// 2.5 把数组数据存储到本地存储里面，利用JSON.stringify()存储为JSON字符串localStorage.setItem('data',JSON.stringify(arr))})// 3. 删除业务// 3.1. 采用事件委托形式，给 tbody 注册点击事件tbody.addEventListener('click',function(e){// 判断是否点击的是删除按钮 A链接if(e.target.tagName==='A'){// 3.2. 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性 data-id=“0"console.log(e.target.dataset.id)// 确认框  确认是否要真的删除if(confirm('您确定要删除这条数据吗？')){// 3.3. 根据索引号，利用 splice 删除数组这条数据arr.splice(e.target.dataset.id,1)// 3.4. 重新渲染页面render()// 3.5. 把最新 arr 数组存入本地存储localStorage.setItem('data',JSON.stringify(arr))}}})</script>
</body></html>
网络标签：

相关问题