学生信息登记表功能描述
- 依次输入学生信息,点击录入按钮会将输入信息填充到下方表格中,并记录数据条数
- 输入框不能有为空的,否则会出现提示
- 刷新页面,数据不丢失
- 点击表格中删除按钮,数据会被删除
实现效果
学生信息登记表
1. 准备阶段
html框架
<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>
<!-- -->
</tbody>
</table>
清除表单默认事件,定义一个数组来存放数据
const form = document.querySelector('.info')
const arr = []
form.addEventListener('submit', function (e) {
e.preventDefault()
})
2. 数据渲染
封装数据渲染函数,从本地存储中获取数据,用map将获取的数据映射到表格中
- 如果本地无数据,arr为null,无法被映射
- 在主线程中获取数据,并调用渲染函数,确保页面刷新后数据不丢失
- 本地中存储的为字符串,取出需用JSON.parse转为对象
const span = document.querySelector('.title span') //记录数据条数位置
const arr = JSON.parse(localStorage.getItem('data')) || [] //取数据,当本地无数据时,默认为空数组
const tbody = document.querySelector('tbody')
addData() //主线程调用渲染函数
function addData() {
const arr = JSON.parse(localStorage.getItem('data')) || [] //渲染前先调用,确保数据为最新的
const newArr = 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:">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr>`
})
tbody.innerHTML = newArr.join('')
span.innerHTML = arr.length //数据条数为数组长度
}
3. 数据添加
创建对象,并将输入框中获取的数据写入对象中,并推入数组,将其渲染到表格中,再将数组存到本地存储中,调用渲染函数
- 输入学生对应序号不能重复,需确保值为数组最后一个的数字加1
- 数组更新完需要存储到本地中
const addBtn = document.querySelector('.add')
const form = 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')
addBtn.addEventListener('click', function () {
if (!uname.value || !age.value || !salary.value || !gender.value || !city.value) {
return alert('请填写完整信息')
}
const obj = {
stuId: arr.length === 0 ? 1 : arr[arr.length - 1].stuId + 1, //三元运算符判断序号
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value,
time: new Date().toLocaleString() //简易获取时间的方法
}
arr.push(obj)
localStorage.setItem('data', JSON.stringify(arr)) //将新数组存储到本地中
addData()
form.reset() //刷新输入框
})
判断输入框是否为空,如果为空,停止录入,并返回alert警告
if (!uname.value || !age.value || !salary.value || !gender.value || !city.value) {
return alert('请填写完整信息')
}
4. 数据删除
找到删除按钮,绑定事件(使用事件委托),并遍历数组,如果数组中存在某一项的序号等于将要删除信息的序号,那么将数组中的那一项删除,并将数组存储到本地存储中,再调用渲染函数
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
for (let i = 0; i < arr.length; i++) {
if (e.target.parentNode.parentNode.firstElementChild.innerHTML == arr[i].stuId) {
arr.splice(i, 1)
localStorage.setItem('data', JSON.stringify(arr))
addData()
}
}
}
})
完整实例代码
<!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>
<!-- -->
</tbody>
</table>
<script>
// 参考数据
let initData = [
{
stuId: 1,
uname: '张三',
age: 20,
gender: '男',
salary: 5000,
city: '北京',
time: '2021-01-01 10:00:00'
}
]
//数据渲染
const span = document.querySelector('.title span')
const arr = JSON.parse(localStorage.getItem('data')) || []
const tbody = document.querySelector('tbody')
addData()
function addData() {
const arr = JSON.parse(localStorage.getItem('data')) || []
const newArr = 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:">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr>`
})
tbody.innerHTML = newArr.join('')
span.innerHTML = arr.length
}
// 数据添加
const form = document.querySelector('.info')
const addBtn = document.querySelector('.add')
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')
addBtn.addEventListener('click', function () {
if (!uname.value || !age.value || !salary.value || !gender.value || !city.value) {
return alert('请填写完整信息')
}
const obj = {
stuId: arr.length === 0 ? 1 : arr[arr.length - 1].stuId + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value,
time: new Date().toLocaleString()
}
arr.push(obj)
localStorage.setItem('data', JSON.stringify(arr))
addData()
form.reset()
})
//清除表单默认提交事件
form.addEventListener('submit', function (e) {
e.preventDefault()
})
// 数据删除
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
for (let i = 0; i < arr.length; i++) {
if (e.target.parentNode.parentNode.firstElementChild.innerHTML == arr[i].stuId) {
arr.splice(i, 1)
localStorage.setItem('data', JSON.stringify(arr))
addData()
}
}
}
})
</script>
</body>
</html>