模态框的增删改查 - 好文

要导入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")
} } }); })

热门工具换一换