关于用jQuery 实现table的增删改查。内含模态框以及Ajax。

最新推荐文章于 2023-10-27 13:30:01 发布

Lurkers.

最新推荐文章于 2023-10-27 13:30:01 发布

阅读量1.4k

点赞数 1

分类专栏： Ajax jQuery

本文链接：https://blog.csdn.net/this_name_true/article/details/80840909

版权

jQuery 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

效果如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Table add and del</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			i{
				font-style: normal;
			}
			table{
				border: 1px solid #ddd;
				width: 800px;
				margin: 50px auto;
				border-collapse: collapse;
				text-align: center;
			}
			td{
				border: 1px solid #DDDDDD;
				height: 40px;
			}
			input{
				outline: none;
				display: none;
			}
			.btn{
				width: 35px;
				height: 25px;
				border: none;
				background: grey;
				color: #fff;
				border-radius: 4px;
				outline: none;
				cursor: pointer;
			}
			.que_change{
				display: none;
			}
			.btn_red{
				background: darkred;
			}
			.btn_blue{
				background: cornflowerblue;
			}
			.btn_green{
				background: darkseagreen;
			}
			.btn_addok{
				background: burlywood;
			}
			.btn_addno{
				background: darkslategrey;
			}
			.modal{
				position: fixed;
				left: 0px;
				top: 0px;
				right: 0px;
				bottom: 0px;
				background: rgba(0,0,0,0.5);
				display: none;
			}
			.viewmodal{
				position: fixed;
				left: 0px;
				top: 0px;
				right: 0px;
				bottom: 0px;
				background: rgba(0,0,0,0.5);
				display: none;
			}
			.modal-dialog{
				position: relative;
				width: 500px;
				background: white;
				margin: 50px auto;
				border-radius: 4px;
			}
			.modal-header{
				border-bottom: 1px solid #eee;
				padding: 15px;
			}
			.modal-header>i{
				float: right;
				font-weight: bold;
				color: #bbb;
				cursor: pointer;
			}
			.modal-body {
			    position: relative;
			    padding: 15px;
			}
			.modal-body input{
				width: 350px;
				border-radius: 4px;
				border: 1px solid #DDDDDD;
				outline: none;
				padding: 10px;
				margin: 10px;
				display: inline-block;
			}
			.modal-footer {
			    padding: 15px;
			    text-align: right;
			    border-top: 1px solid #e5e5e5;
			}
		</style>
	</head>
	<body>
		<table
			<thead>
				<tr>
					<td>姓名</td>
					<td>年龄</td>
					<td>成绩</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<!--<tr>
					<td>
						<span>张三</span>
						<input type="text" />
					</td>
					<td>
						<span>20</span>
						<input type="text" />
					</td>
					<td>
						<span>68</span>
						<input type="text" />
					</td>
					<td>
						<button class="btn">修改</button>
						<button class="btn btn_red">删除</button>
						<button class="btn btn_blue">查看</button>
					</td>
				</tr>-->
				<tr>
					<td colspan="4">
						<button class="btn btn_green">增加</button>
					</td>
				</tr>
			</tbody>
		</table>
		
		<!--增加的模态框begin-->
		<div class="modal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<i>X</i>
						<h4>会员管理</h4>
					</div>
					<div class="modal-body">
						<p>
							姓名：<input type="text" />
						</p>
						<p>
							年龄：<input type="text" />
						</p>
						<p>
							成绩：<input type="text" />
						</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn_addok">确定</button>
						<button class="btn btn_addno">取消</button>
					</div>
				</div>
			</div>
		</div>
		
		
		<!--增加的模态框end-->
		
		<!--查看的模态框begin-->
		<div class="viewmodal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<i>X</i>
						<h4>会员管理</h4>
					</div>
					<div class="modal-body">
						<p>
							姓名：<span></span>
						</p>
						<p>
							年龄：<span></span>
						</p>
						<p>
							成绩：<span></span>
						</p>
					</div>
					<div class="modal-footer">
						
						<button class="btn btn_addno">取消</button>
					</div>
				</div>
			</div>
		</div>
		
		
		<!--查看的模态框end-->
		
		<script>
			$.ajax({
				type:"get",
				url:"js/data.json",
				success:function(res){
					//console.log(res[0].name)
					var str=""
					for (var i=0;i<res.length;i++) {
						str+='<tr><td><span>'+res[i].name+'</span><input type="text" /></td><td><span>'+res[i].age+'</span><input type="text" /></td><td><span>'+res[i].score+'</span><input type="text" /></td><td><button class="btn change">修改</button> <button class="btn que_change">确定</button> <button class="btn btn_red">删除</button> <button class="btn btn_blue">查看</button></td></tr>'
				
					}
					$("table").append(str)
				}
			});
			
			
			$(function(){
				
				/*修改begin*/
				var arrXiu=[]
				$(document).on("click",".change",function(){
					arrXiu = []
					$(this).hide()
					$(this).siblings(".que_change").show()
					
					$(this).parent().siblings().find("span").each(function(){
						arrXiu.push($(this).text())
					})
					$(this).parent().siblings().find("input").each(function(i){
						$(this).val(arrXiu[i])
						console.log(i)
					})
					
					
					$(this).parent().siblings().find("span").hide()
					$(this).parent().siblings().find("input").show()
					console.log(arrXiu)
				})
				
				//确定
				var arrQue=[]
				$(document).on("click",".que_change",function(){
					arrQue = []
					$(this).hide()
					$(this).siblings(".change").show()
					
					$(this).parent().siblings().find("input").each(function(){
						arrQue.push($(this).val())
					})
					$(this).parent().siblings().find("span").each(function(i){
						$(this).text(arrQue[i])
						console.log(i)
					})
					
					
					$(this).parent().siblings().find("span").show()
					$(this).parent().siblings().find("input").hide()
					console.log(arrXiu)
				})
				
				
				/*修改end*/
				
				
				/*增加begin*/
				$(document).on("click",".modal-header i",function(){
					$(".modal").fadeOut(300)
				})
				$(document).on("click",".btn_addno",function(){
					$(".modal").fadeOut(300)
				})
				
				var arrAdd=[]
				$(document).on("click",".btn_green",function(){
					$(".modal").fadeIn(300)
					
				})
				
				$(document).on("click",".btn_addok",function(){
					arrAdd=[]
					$(".modal-body").find("p input").each(function(){
						arrAdd.push($(this).val())
						//console.log(arrAdd)
						})
					console.log(arrAdd)
					var strr='<tr><td><span>'+arrAdd[0]+'</span><input type="text" /></td><td><span>'+arrAdd[1]+'</span><input type="text" /></td><td><span>'+arrAdd[2]+'</span><input type="text" /></td><td><button class="btn change">修改</button> <button class="btn que_change">确定</button> <button class="btn btn_red">删除</button> <button class="btn btn_blue">查看</button></td></tr>'
						$("table").append(strr)
						$(".modal").fadeOut(300)
						$(".modal-body").find("p input").val('')
					})
					
				
				/*增加end*/
				
				/*查看begin*/
					$(document).on("click",".modal-header i",function(){
						$(".viewmodal").fadeOut(300)
					})
					$(document).on("click",".btn_addno",function(){
						$(".viewmodal").fadeOut(300)
					})
					
					var arrView=[]
					$(document).on("click",".btn_blue",function(){
						$(".viewmodal").fadeIn(300)
						
						$(this).parent().siblings().find("span").each(function(){
							arrView.push($(this).text())
						})
						$(".modal-body").find("p span").each(function(i){
							$(this).text(arrView[i])
							console.log(i)
						})
						arrView=[]
					})
					
				/*查看end*/
				
				
				/*删除begin*/
				$(document).on("click",".btn_red",function(){
					if(confirm("确定删除吗？")){
						$(this).parents("tr").fadeOut(300)
					}
					
				})
				/*删除end*/
				
			})
			
			
		</script>
	</body>
</html>

json代码：

[
	{"name":"张三","age":"20","score":"68"},
	{"name":"李四","age":"22","score":"78"},
	{"name":"赵钱","age":"24","score":"88"},
	{"name":"孙李","age":"26","score":"98"}
]