下面就用两种方法去用jQuery实现一些简单的增删改操作，包含模态窗：
第一种方法，我自己写的，写的时候用到了事件委托，需要注意的是，input框，他的清空操作所处的位置，代码还是很容易看懂的，运行暂时没发现什么问题，附上图代码吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.add {
width: 100px;
height: 30px;
background-color: #2c551d;
color: white;
margin: 15px;
}
input {
width: 200px;
height: 30px;
margin: 15px;
}
table {
width: 500px;
line-height: 30px;
text-align: center;
margin: 15px;
}
table tr {
border: none;
}
.update,
.delete {
padding: 5px;
margin: 0 8px;
border: none;
color: white;
}
.update {
background-color: red;
}
.delete {
background-color: #2c551d;
}
.add_list {
display: none;
}
</style>
</head>
<body>
<button class="add">＋添加记录</button><br>
<table class="add_list" width="300" height="200">
<tr>
<td>id</td>
<td><input class="ids" type="text" placeholder="请输入id" /></td>
</tr>
<tr>
<td>username</td>
<td><input class="usernames" type="text" placeholder="请输入用户名" /></td>
</tr>
<tr>
<td>password</td>
<td><input class="passwords" type="text" placeholder="请输入密码" /></td>
</tr>
<tr>
<td colspan="2">
<button class="trueadd">确认添加</button>
<button class="trueupdate">确认修改</button>
</td>
</tr>
</table>
<input type="text" id="content" placeholder="请输入用户名">
<button class="search" onclick="search(1)">搜索</button>
<button class="search" onclick="search(2)">重置</button><br>
<table class="main" class="list" border="" cellspacing="0" cellpadding="0">
<tr>
<th>id</th>
<th>username</th>
<th>password</th>
<th></th>
</tr>
<tr class="list_item">
<td>1</td>
<td>路飞</td>
<td>lf</td>
<td><button class="update">修改</button><button class="delete">删除</button></td>
</tr>
<tr class="list_item">
<td>2</td>
<td>山治</td>
<td>sz</td>
<td><button class="update">修改</button><button class="delete">删除</button></td>
</tr>
<tr class="list_item">
<td>3</td>
<td>索隆</td>
<td>sl</td>
<td><button class="update">修改</button><button class="delete">删除</button></td>
</tr>
<tr class="list_item">
<td>4</td>
<td>罗宾</td>
<td>lb</td>
<td><button class="update">修改</button><button class="delete">删除</button></td>
</tr>
<tr class="list_item">
<td>5</td>
<td>娜美</td>
<td>nm</td>
<td><button class="update">修改</button><button class="delete">删除</button></td>
</tr>
</table>
<script src="./jquery-3.6.0.js"></script>
<script>
// let login = [{
// id: 1,
// username: "路飞",
// password: "123",
// }, {
// id: 2,
// username: "张磊",
// password: "456",
// }, {
// id: 3,
// username: "张文文",
// password: "789",
// }, {
// id: 4,
// username: "1111",
// password: "1111",
// }, {
// id: 5,
// username: "2222",
// password: "2222",
// }]
// function user() {
// let html = ''
// login.forEach(function (item) {
// html += `<tr align="center" class="list_item">
// <td>${item.id}</td>
// <td>${item.username}</td>
// <td>${item.password}</td>
// <td>
// <button class="update">✎修改</button>
// <button class="delete">✘删除</button>
// </td>
// </tr>`
// })
// $('tbody').append(html)
// }
// user()
// ---------------------删除---------------------
// $(".delete").on("click", function() {
$("tbody").on("click", ".delete", function () {
$(this).parent().parent().remove();
})
//---------------------添加记录---------------------------
$(".add").on("click", function () {
$(".ids").val("")
$(".usernames").val("")
$(".passwords").val("") //弹框出现，确认更新按钮不出现
$(".add_list").show()
$(".trueadd").show()
$(".trueupdate").hide()
})
//点击确认添加按钮的逻辑实现
$(".trueadd").on("click", function () { // 获取信息
var id = $(".ids").val()
var username = $(".usernames").val()
var password = $(".passwords").val() //$(".trueadd").text("确认添加")
if (username == "") { //用户名不得为空
alert("请输入用户名")
} else { // 拼接
let html = `<tr align="center" class="list_item">
<td>${id}</td>
<td>${username}</td>
<td>${password}</td>
<td>
<button class="update">修改</button>
<button class="delete">删除</button>
</td>
</tr>`
$("tbody").append(html)
console.log(1111);
$(".add_list").hide()
}
//删除
$(".del").on("click", function () {
$(this).parent().parent().remove()
})
})
//---------------修改---------------------------------------
// $(".update").on("click", function () {
$("tbody").on("click", ".update", function () {
console.log(111111);
$(".add_list").show()
//获取当前的文本
var id = $(this).parent().siblings("td:nth-child(1)").text()
var username = $(this).parent().siblings("td:nth-child(2)").text()
var password = $(this).parent().siblings("td:nth-child(3)").text()
$(".ids").val(id)
$(".usernames").val(username)
$(".passwords").val(password)
$(".trueadd").hide();
$(".trueupdate").show();
var that = $(this);
//点击确认修改时
$(".trueupdate").on("click", function () {
// 获取信息
var id = $(".ids").val()
var username = $(".usernames").val()
var password = $(".passwords").val()
that.parent().siblings("td:nth-child(1)").text(id)
that.parent().siblings("td:nth-child(2)").text(username)
that.parent().siblings("td:nth-child(3)").text(password)
$(".add_list").hide()
})
})
//-------------------------查询-------------------------------------------------
$(".search").on("click", function () {
})
function search(type) {
var _val = ''
if (type == 1) {
_val = $("#content").val();
} else if (type == 2) {
_val = ''
$("#content").val(_val)
}
console.log(_val);
//获取关键词作为索引
if (!_val) {
$(".list_item td").parent().show(); //当关键词为空时，显示所有元素
} else {
$(".list_item td").parent().hide();
$(".list_item td:contains(" + _val + ")").parent().show()
}
}
</script>
</body>
</html>第二种方法,用到了本地存储，看需求吧，用户体验感第一位，里面的模态窗还是很实用的：
<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><!-- 模态窗 -->
<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>下面是jQuery部分了
<script src="../jquery/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>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
