要导入bootstrap包
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.0.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>DOM节点
<table class="table table-bordered text-center">
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
<td>操作</td>
</tr>
<button class="btn btn-primary update" data-toggle = "modal" data-target = "#updateModal">修改</button>
<button class="btn btn-danger del">删除</button>
</td>
</tr>-->
</table>
<div class="container" style="padding-top: 40px;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<input type="text" class="form-control" />
</div>
<div class="col-md-3">
<button class="btn btn-danger">搜索</button>
<button class="btn btn-default add" data-toggle="modal" data-target="#addModal">增加</button>
</div>
</div>
</div>
模态框
写模态框。注意要写在最外面。
<div class="modal fade" 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>
</div>
</div>
</div>增加模态框
<div class="modal fade" 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" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary que_add">确定</button>
</div>
</div>
</div>
</div>
</div> 加载数据
var urlLink = "api/action.php"
$.ajax({
url:urlLink,
type:"get",
data:{
action:"show"
},
success:function(res){
console.log(res[0])
var data = eval(res)
var data = $.parseJSON(res)
var data = JSON.parse(res)
console.log(data)
var str = ''
for (var i=0;i<data.length;i++) {
str+='<tr data-id='+data[i].id+'><td>'+(i+1)+'</td><td>'+data[i].name+'</td><td>'+data[i].score+'</td><td><button class="btn btn-primary update" data-toggle = "modal" data-target = "#updateModal">修改</button> <button class="btn btn-danger del">删除</button></td></tr>'
}
$("table").append(str)
}
})
修改内容
var that = null
$(document).on("click",".update",function(){
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){
if(res==1){
_this.parents("tr").remove()
}
}
})
})增加
$(document).on("click",".que_add",function(){
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){
if(res==1){
var str='<tr data-id='+lastId+'><td>'+lastId+'</td><td>'+addUsernmae+'</td><td>'+addscore+'</td><td><button class="btn btn-primary update" data-toggle = "modal" data-target = "#updateModal">修改</button> <button class="btn btn-danger del">删除</button></td></tr>'
$("table").append(str)
$("#addModal").modal("hide")
}
}
});
})