1. If you want to use jquery to add, delete, modify and check, we should first download the js code of jquery
The link is as follows: https://jquery.com/
2. Familiar with the use of jquery, and the advantages and disadvantages of jquery
3. jquery is the encapsulation and simplification of javascript, which has the advantage of writing less and doing more!
1. CSS style
<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>2. HTML code
<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>
</body>3. jQuery code
<script src="../js/jquery-3.6.0.js"></script> //引入jquery的公用封装代码
<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;
})
console.log(id);
user.username=$(".username").val();
user.password=$(".pwd").val();
//重新更新到本地
localStorage.userList = JSON.stringify(userArr);
}
})
</script>The display diagram is as follows:
Realize the delete function
First find the id of the content you want to delete according to the delete button, and the id is consistent with the id in the array to delete the data in the array, and then re-render the array to delete
2. Realize the modified function
To modify data, we need to use reverse writing to rewrite the data we want to modify in the text box, and then assign the rewritten data to the selected array
We click to add and modify to call the same modal box, so we need to write a hidden input box
When we reverse the selection, the input box will have the selected id data, according to which it is judged as a modified box, if it is added, its id is undefined, so it is judged as an added box
3. Implement additional functions
The added function also uses the modal box to collect data, so an array is also used to store the data, the collected input box val() is traversed into the array, and the array subscript is used to insert the dom node to be added. The added function it's done
4. Realize the function of checking
First, get the val() in the search box to determine whether the content of the search box is undefined. If it is, all data will be queried by default. If there is data (characters), then use the keyword includes() to search for all people whose names contain keywords All data for