功能:学生信息表录入、删除(本地存储)
<!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