php+bootstrap+jqueryAjax实现增删改查

首先导入js包和bootstrap包 吧表格布局做好

			

				

					

						
					
					

						搜索
						增加
					
				
			
			

				

					
编号
					
姓名
					
成绩
					
操作
				
				

					
1
					
张三
					
60
					

						修改
						删除
					
				
			

然后点击添加和修改需要模态框 我们也要做出来 注意好模态框的id

			  

			    

			      

			        ×
			        
修改
			      
			      

			       	

			       		

			       			
			       		
			       		

			       			
			       		
			       	
			      
			      

			        取消
			        确定
			      
			    

			  

			
		

×

增加

取消 确定

然后开启XAMPP 表格需要四行 序号 姓名 成绩 以及操作

哪我们在数据库里面需要设置这四行 以及在编辑程序里php的文件

 然后我们再利用jqueryAjax把我们弄好的组加载出来

var urlLink = "api/action.php"
			$.ajax({
				url:urlLink,
				type:"get",
				data:{
					action:"show"
				},
				success:function(res){
					var data = JSON.parse(res)
					var str = ''
					for (var i=0;i'+(i+1)+''+data[i].name+''+data[i].score+'修改 删除'
					}
					$("table").append(str)
				}
			})

然后完善功能：删除 添加 修改 

//修改
			var that = null
			$(document).on("click",".update",function(){
//				alert(1)
				that = $(this).parents("tr")
				
				var arr = []
				$(this).parents("tr").find("td:not(:first):not(:last)").each(function(){
					arr.push($(this).text())
				})
				$("#updateModal").find("input").each(function(i){
					$(this).val(arr[i])
				})
				
			})
			
			$(document).on("click",".que_update",function(){
				var arr = []
				var id = that.data("id")
				$("#updateModal").find("input").each(function(){
					arr.push($(this).val())
				})
				$.ajax({
					url:urlLink,
					type:"get",
					data:{
						action:"update",
						rename:arr[0],
						rescore:arr[1],
						id:id
					},
					success:function(res){
						if(res==1){
							that.find("td:not(:first):not(:last)").each(function(i){
								$(this).text(arr[i])
							})
							$("#updateModal").modal("hide")
						}else {
							alert('错了')
						}
					}
				})
			})
			//删除
			$(document).on("click",".del",function(){
				var id = $(this).parents("tr").data("id")
				var _this = $(this)
				$.ajax({
					url:urlLink,
					type:"get",
					data:{
						action:"del",
						id:id
					},
					success:function(res){
//						console.log(res)
						if(res==1){
							_this.parents("tr").remove()
						}
					}
				})
				
				
			})
			//增加
			$(document).on("click",".que_add",function(){
//				alert(1)
				var lastId = $("table tr:last").data("id")+1
				var addUsernmae = $("#addusrname").val()
				var addscore = $("#addscore").val()
				$.ajax({
					type:"get",
					url:urlLink,
					async:true,
					data:{
						action:"add",
						id:lastId,
						addUsername:addUsernmae,
						addscore:addscore
					},
					success:function(res){
//						console.log(res)
						if(res==1){
							var str=''+lastId+''+addUsernmae+''+addscore+'修改 删除'
							$("table").append(str)
							$("#addModal").modal("hide")
						}
						
					}
				});
				
				
			})

这样 php+bootstrap+jqueryAjax实现增删改查 就做完了

在做这个东西的时候 注意模态框id 避免搞错 还有php文件里面的命名 注意弄混 其他的多加注意就可以了