1、实现使用localstorage将用户输入的内容存储在浏览器本地内存中,并实现增、删、改、查。
2、熟练使用map()、join()对数组的操作
首先是html+css部分,做的比较粗糙,基本上是那个意思😅。
html+css
<style>
* {
padding: 0;
margin: 0;
box-sizing: content-box;
}
.main {
text-align: center;
}
input {
border: 1px solid #ccc;
width: 80px;
height: 20px;
outline: none;
margin: 10px;
padding-left: 5px;
font-size: 12px;
}
.info {
margin-top: 50px;
}
select {
width: 60px;
height: 20px;
margin: 5px;
border: 1px solid #ccc;
color: #000;
font-size: 12px;
}
.tiao {
margin: 0 auto 20px auto;
width: 800px;
height: 50px;
text-align: end;
line-height: 50px;
background-color: #ccc;
}
table,
th,
td {
border-collapse: collapse;
border: 1px solid #000;
}
th {
padding: 5px;
background-color: #ccc;
}
td {
padding: 5px;
background-color: #eee;
}
table {
margin: 0 auto;
width: 800px;
}
i {
font-style: normal;
}
</style>
</head>
<body>
<div class="main">
<h1>学生就业统计表</h1>
<form class="info" autocomplete="off">
<input type="text" name="uname" class="uname" value="老王">
<input type="text" name="age" class="age" value="17">
<input type="text" name="salary" class="salary" value="120000">
<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>
</select>
<button>+添加</button>
</form>
<div class="biao">
<div class="tiao"><i></i></div>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>薪资</th>
<th>性别</th>
<th>就业城市</th>
<th>录入时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
接下来就是js部分
const info = document.querySelector('.info')
const uname = info.children[0]
const age = info.children[1]
const salary = info.children[2]
const gender = info.children[3]
const city = info.children[4]
const i = document.querySelector('.tiao i')
const tbody = document.querySelector('tbody')
info.addEventListener('submit', function (e) {
e.preventDefault()
for (let i = 0; i < 2; i++) {
if (info.children[i].value === '') {
return alert('输入错误')
}
}
const timer = new Date().toLocaleString()
arr.push(
{
stuID: arr.length ? arr[arr.length - 1].stuID + 1 : 1 ,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value,
timer: timer
}
)
this.reset()
render()
localStorage.setItem('data', JSON.stringify(arr))
})
const arr = JSON.parse(localStorage.getItem('data')) || []
//将字符型转化成数组并存入到arr中
function render() {
//通过map遍历数组,并将数据返回给新数组
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.timer}</td>
<td><a href="javascript:" data-id= ${index}>删除</a></td>
</tr>`
})
tbody.innerHTML = trarr.join('')
i.innerHTML = `共有数据${trarr.length}条`
}
render()
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
if (confirm('确定要删除这条数据嘛?')) {
arr.splice(e.target.dataset.id, 1)
render()
localStorage.setItem('data', JSON.stringify(arr))
}
}
})
1、思路开始,要使用localstorage.setItem('data',obj)对用户所输入的对象进行接收,并将其渲染到页面中,分为用户添加渲染一次,和用户删除渲染一次,所以这里先写一个render函数,统一进行渲染
2、接着想到数据的存储,删除离不开数组,看一下,是否能够使用数组进行操作,观察了一下,可以,将用输入的数据归成一个对象,并将对象存储到数组里,先声明一个arr数组将存入到data键里面的东西能够‘拿出来’。
3、开始写渲染函数(可以先写一个初始化函数实现数据可视),使用了map()方法将数组中的内容,还有索引号一一‘拿出来’,返回一个新的数组,这个数组接着使用join()方法使数组变成字符串插入到tbody中,就此渲染函数结束
4、写用户输入阶段,e.preventDefault()阻止页面跳转,再接着就是判空,再就是value将用户输入的东西拿过来,并存入对象,再将对象加入到数组中,通过this.reset()将数据清空,再渲染到页面中,这个时候最重要的是将arr重新存入到本地中。
5、删除模块,就是在渲染中将数组的索引,以自定义属性的属性给到a中,通过删除splice(找到这个索引,1),删除。。
写的不好。。。。🫡