准备
首先，我们需要准备一个开发工具，这里我使用的是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的文件打开并导入我们所需要的用到的文件：
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.0.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/bootstrap.js" ></script>
</head>HTML结构
然后就是我的HTML结构：
<div class="container" style="padding-top: 40px;"><!--整个盒子居中-->
<table class="table table-bordered text-center">
<tr >
<td colspan="4">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<input type="text" class="form-control secbox" />
</div>
<div class="col-md-3">
<button class="btn btn-danger sec">搜索</button><!--搜索确定-->
<button class="btn btn-default add" data-toggle="modal" data-target="#addModal">增加</button>
<!--data-toggle data-target 属性插入bootstrap事件自带的模态框事件-->
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
<td>操作</td>
</tr>
</table>
<!--修改模态框-->
<div class="modal fade up" tabindex="-1" role="dialog" id="updateModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">修改</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="text" placeholder="名字" id="reusrname" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder="成绩" class="form-control" id="rescore"/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary que_update">确定</button><!--确定修改-->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>
<!--增加模态框-->
<div class="modal fade addmd" tabindex="-1" role="dialog" id="addModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">增加</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="text" placeholder="名字" id="addusrname" class="form-control" />
</div>
<div class="form-group">
<input type="text" placeholder="成绩" class="form-control" id="addscore"/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary que_add">确定</button><!--确定添加-->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>增加内容后效果图：
编写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.length;i++){
str+='<tr><td>'+(i+1)+'</td><td>'+res[i].name+'</td><td>'+res[i].age+'</td><td><button class="btn btn-primary btn-xs update" data-toggle = "modal" data-target = "#updateModal">修改</button> <button class="btn btn-danger btn-xs del">删除</button></td></tr>'
}
//用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='<tr><td>'+(num-1)+'</td><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td><button class="btn btn-primary btn-xs update" data-toggle = "modal" data-target = "#updateModal">修改</button> <button class="btn btn-danger btn-xs del">删除</button></td></tr>'
$("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方法实现一个简单后台表格增删改查的所有编写思路和过程了。
本文属于学习分享，单纯记录自己的学习经验，喜欢的大佬们可以帮我点下赞喔，谢谢观看！
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
