JQuery、Bootstrap框架和Ajax方法实现一个简单后台表格增删改查

准备

---

首先，我们需要准备一个开发工具，这里我使用的是HBuilder。

感兴趣的可以在HBuider官网中下载：http://www.dcloud.io/

关于后台布局，我选择Bootstrap这款框架，原因很简单跟他的简介一样：“简洁、直观、强悍的前端开发框架。”

由于Bootstrap需要下载，我这里也提供了官网（当前版本 v3.3.7）链接：https://v3.bootcss.com/getting-started/#download

因为接下来需要用到的模态框插件，所以我也直接把介绍放到这里方便观看：https://v3.bootcss.com/javascript/#modals

---

环境搭建

这是我的开发工程目录

导入jquery-1.11.0.js和bootstrap.js到js文件夹，导入bootstrap.css到css文件夹，data文件夹创建data.json。

接下来则是创建一个名为table.html的文件打开并导入我们所需要的用到的文件：

---

HTML结构 

然后就是我的HTML结构：

		

			

				

					

						

							

								

									
								
								

									搜索
									增加
									
								
							
						
					
				
				

					
编号
					
姓名
					
成绩
					
操作
				
			
			
			

			  

			    

			      

			        ×
			        
修改
			      
			      

			       	

			       		

			       			
			       		
			       		

			       			
			       		
			       	
			      
			      

			        取消
			        确定
			      
			    

			  

			
		
		
		

			  

			    

			      

			        ×
			        
增加
			      
			      

			       	

			       		

			       			
			       		
			       		

			       			
			       		
			       	
			      
			      

			        取消
			        确定
			      
			    

			  

			
	

增加内容后效果图：

 

---

编写JavaScript脚本

完成HTML结构之后就可以开始写Script了：

• 导入json文件

$.ajax({
				type:"get",
				//get方法
				url:"data/data.json",
				//json源文件
				async:true,
				//异步
				success:function(res){
					var str=''
					for (var i=0;i'+res[i].name+''+res[i].age+'修改 删除'
					}
					//用for循环将json文件里的name和age拼接成字符串
					$(".table").append(str)
					//将刚才保存的字符串append（在被选元素的结尾（仍然在内部）插入指定内容）到我们的HTML里面
				}
			});

用$.ajax方法导入json文件并将json文件内容append（在被选元素的结尾（仍然在内部）插入指定内容）到我们的HTML里。

• 增加

//增加
			$(".que_add").click(function(){//点开增加按钮弹出的模态框后的确定按钮事件
				var arr=[]
				var num=$(".table tr").length
				var str=''
				var name=$(this).parent().siblings().find("input").val()//找到input框的内容并存放在命名为name的变量中
				var score=$(this).parent().siblings().find("input:not(:first)").val()//找到input框的内容并存放在命名为score的变量中
				$(this).parent().siblings().find("input").each(function(){//将两个input的内容用each方法遍历并用push方法逐个存放到叫arr的数组中
					arr.push($(this).val())	
					$(this).val("")
				})
				if (name==0||score==0) {//判断内容是否为空，否则弹窗"请输入一点东西"
					alert("请输入一点东西")
				} else{//是则加入到table中（表格）并把模态框关闭
					str=''+(num-1)+''+arr[0]+''+arr[1]+'修改 删除'
					$("table").append(str)
					$(".addmd").modal("hide")
				}
			})

运用euch方法遍历和push方法（可向数组的末尾添加一个或多个元素）

增加模态框效果图：

• 删除

			//删除
			$(document).on("click",".del",function(){//找到点击的类目为del的按钮实现删除
				$(this).parents("tr").remove()
			})

找到点击按钮项的父元素tr，remove删除即可。 

• 修改

//对象缓存
			var _this=null
			$(document).on("click",".update",function(){
				_this=$(this).parents("tr")//缓存类名为update的父级tr项
			})
			//确定修改
			$(".que_update").click(function(){//同增加事件
				var arr=[]
				$(this).parent().siblings().find("input").each(function(){
					arr.push($(this).val())
					$(this).val("")
				})
				_this.find("td:not(:first):not(:last)").each(function(i){//同增加事件，但这里因为有arr[i]所以要在function()括号加个变量i
					$(this).text(arr[i])
				})
				//弹出模态框
				$(".up").modal("hide")
			})

对象缓存是为了避免后面修改功能使用重复的对象，第一次写的时候在此处遇到的问题就是因为没有用到对象缓存，无法进行准确的点击侦听。修改也是此后台的难点，必须先理解什么是对象缓存。

修改模态框效果图：

• 查询

			//搜索
			$(".sec").click(function(){//搜索框的点击事件
				var data=$(".secbox").val()
				if (data==0) {//判断搜索框是否为空，是则弹窗"请输入一点东西"
					alert("请输入一点东西")
				}else{//否则搜索内容为搜索框（.secbox）里的内容（val）的项将他的背景颜色改成淡蓝色
					$(".table tr:not(:first):contains("+data+")").css("background","#D9EDF7")
					$(this).blur(function(){//离开搜索框是变成默认颜色
						$(".secbox").val("")
						$(".table tr").css("background","#fff")
					})
				}
			})

搜索框的点击事件，简单的查询功能。

查询效果图：

---

这就是使用Jquery、Bootstrap框架和Ajax方法实现一个简单后台表格增删改查的所有编写思路和过程了。

本文属于学习分享，单纯记录自己的学习经验，喜欢的大佬们可以帮我点下赞喔，谢谢观看！