Today, I will use juqery to realize the addition, deletion, modification and query of the list.
First, let me show you the effect diagram of the operation
Next, put the code to achieve this effect
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrapper {
width: 600px;
margin: 0 auto;
}
.modal {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
display: none;
}
.modal .form {
width: 500px;
height: 300px;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
padding: 20px;
box-sizing: border-box;
}
.modal .form input {
width: 100%;
height: 35px;
margin-bottom: 20px;
}
.modal div span:nth-of-type(2) {
float: right;
}
.modal .form div:nth-of-type(4) {
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<!-- 模态窗 -->
<div class="modal">
<div class="form">
<!-- 隐式接收修改的id值用于修改 -->
<input type="hidden" value="" class="active">
<div><span>修改记录</span><span class="closeModal">X</span></div>
<hr>
<div><input type="text" class="username" placeholder="用户名"></div>
<div><input type="password" class="pwd" placeholder="密码"></div>
<div><button class="closeModal">关闭</button>  <button class="addInfo">确认</button></div>
</div>
</div>
<div class="wrapper">
<div>
<input type="search" value="">
<button class="search">查询</button>
<button class="add">增加</button>
</div>
<div class="tb">
<table border="1" width="500">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>password</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>张三</td>
<td>123456</td>
<td>
<button class="update">修改</button>
<button class="del">删除</button>
</td>
</tr> -->
</tbody>
</table>
</div>
</div>
<script src="./js/jquery-3.6.0.js"></script>
<script>
$(function() {
//点击增加按钮
$(".add").click(function() {
showModal();
})
//点击关闭和X
$(".closeModal").click(function() {
closeMdal();
})
//点击确认
$(".addInfo").click(function() {
//判断是添加操作还是修改
var id = $(".active").val();
if (id == "") {
addInfo(); //添加操作
} else {
//修改操作
updateInfo(id)
}
//渲染操作
showInfo();
//关闭
closeMdal();
})
//点击删除
$("tbody").on("click", ".del", function() {
var id = $(this).parent().parent().children().eq(0).text();
//删除方法
delInfo(id);
//渲染
showInfo();
})
//点击修改
$("tbody").on("click", ".update", function() {
//显示模态窗
showModal();
//根据id获取对应的对象
userArr = localStorage.userList == undefined ? [] : JSON.parse(localStorage.userList);
var id = $(this).parent().parent().children().eq(0).text();
var user = userArr.find(obj => {
return obj.id == id;
})
//反写
$(".username").val(user.username);
$(".pwd").val(user.password);
$(".active").val(user.id);
})
//点击查询
$(".search").click(function(){
//获取用户输入的关键词
var keywords=$("input[type=search]").val();
//查询后渲染
showInfo(keywords);
//清空
$("input[type=search]").val("");
})
//关闭模态窗
function closeMdal() {
$(".modal").fadeOut();
$(".username").val("");
$(".pwd").val("");
$(".active").val("");
}
//显示模态窗
function showModal() {
$(".modal").fadeIn();
}
//获取当前最新的唯一标识
var nextId = localStorage.nextId == undefined ? 0 : localStorage.nextId * 1;
var userArr; //列表数组
//添加操作
function addInfo() {
userArr = localStorage.userList == undefined ? [] : JSON.parse(localStorage.userList);
var username = $(".username").val();
var password = $(".pwd").val();
//封装为对象放入数组
var obj = {
id: nextId++,
username: username,
password: password
}
//添加到数组
userArr.push(obj);
//重新更新到本地
localStorage.userList = JSON.stringify(userArr);
//更新id
localStorage.nextId = nextId;
}
//渲染操作
showInfo(); //第一次进来渲染
function showInfo(keywords) {
//每次渲染前先清空
$("tbody").html("");
userArr = localStorage.userList == undefined ? [] : JSON.parse(localStorage.userList);
//如果是条件查询，就过滤出符合条件的数组
if(keywords!=undefined){
userArr=userArr.filter(obj=>{
return obj.username.includes(keywords);
})
}
userArr.forEach(obj => {
$("tbody").prepend(` <tr>
<td>${obj.id}</td>
<td>${obj.username}</td>
<td>${obj.password}</td>
<td>
<button class="update">修改</button>
<button class="del">删除</button>
</td>
</tr>`)
})
}
//删除操作
function delInfo(id) {
userArr = localStorage.userList == undefined ? [] : JSON.parse(localStorage.userList);
//根据id找到对应的index
var index = userArr.findIndex(obj => {
return obj.id == id;
})
//根据index删除
userArr.splice(index, 1);
//重新更新到本地
localStorage.userList = JSON.stringify(userArr);
}
//修改操作
function updateInfo(id) {
userArr = localStorage.userList == undefined ? [] : JSON.parse(localStorage.userList);
var user = userArr.find(obj => {
return obj.id == id;
})
user.username=$(".username").val();
user.password=$(".pwd").val();
//重新更新到本地
localStorage.userList = JSON.stringify(userArr);
}
})
</script>
</body>
</html>
This applies to local storage and jquery, remember to download the code of jQuery before using it!