今天给大家讲如何用Ajax做增删改查。
基本操作先写HTML和CSS.
<body>
<table>
<tr style="background: #F2F7FF;">
<td colspan="4">
<button class="add" style="width: 200px;background:#009FFF;">+ 增加</button>
</td>
</tr>
<tr style="background: #F2F7FF;">
<td>名字</td>
<td>年龄</td>
<td>分数</td>
<td>操作</td>
</tr>
<!--<tr>
<td>aa</td>
<td>12</td>
<td>88</td>
<td>
<button class="del">删除</button>
<button class="alter">修改</button>
<button class="view">查看</button>
</td>
</tr>
<tr>
<td>aa</td>
<td>12</td>
<td>88</td>
<td>
<button class="del">删除</button>
<button class="alter">修改</button>
<button class="view">查看</button>
</td>
</tr>
<tr>
<td>aa</td>
<td>12</td>
<td>88</td>
<td>
<button class="del">删除</button>
<button class="alter">修改</button>
<button class="view">查看</button>
</td>
</tr>
<tr>
<td>aa</td>
<td>12</td>
<td>88</td>
<td>
<button class="del">删除</button>
<button class="alter">修改</button>
<button class="view">查看</button>
</td>
</tr>
<tr>
<td>aa</td>
<td>12</td>
<td>88</td>
<td>
<button class="del">删除</button>
<button class="alter">修改</button>
<button class="view">查看</button>
</td>
</tr>-->
</table>写样式让表格变得美观一点。
<style>
*{margin: 0;padding: 0;}
td{
border: 1px solid #ddd;
color: #333;
padding: 10px;
text-align:center
}
tr:hover{background:#F2F7FF ;}
table{margin: auto;border-collapse: collapse;}
button{
padding: 5px 10px;
border-radius: 6px;
border: #009FFF;
color: #fff;
}
.del{
background: #DA0059;
}
.alter{
background: #00D8DA;
}
.view{
background:#FBC703 ;
}
</style>写模态框。注意要写在最外面。
<!--增加模态框-->
<div id="modal-dialog"class="add-modal">
<div class="modal-content">
<div class="modal-body">
<h3>增加</h3>
<p>姓名<input type="text"></p>
<p>年龄<input type="text"></p>
<p>分数<input type="text"></p>
<button id="resign" class="btn">取消</button>
<button id="close" class="btn sure">确定</button>
</div>
</div>
</div>
<!--增加模态框-->
<!--修改模态框-->
<div id="modal-dialog"class="alter-modal">
<div class="modal-content">
<div class="modal-body">
<h3>修改</h3>
<p>姓名<input type="text"></p>
<p>年龄<input type="text"></p>
<p>分数<input type="text"></p>
<button id="resign" class="btn">取消</button>
<button id="close" class="btn alter_ok">确定</button>
</div>
</div>
</div>
<!--修改模态框-->
<!--查看-->
<div id="modal-dialog"class="view-modal">
<div class="modal-content">
<div class="modal-body">
<h3>查看</h3>
<p>姓名<input type="text"></p>
<p>年龄<input type="text"></p>
<p>分数<input type="text"></p>
<button id="resign" class="btn">取消</button>
<button id="close" class="btn ">确定</button>
</div>
</div>
</div>给模态框加上样式，让模态框也能动起来。
.modal-content {
width: 315px;
height: 295px;
margin: 100px auto;
padding: 1px 1px;
}
.modal-content .modal-body {
padding: 52.5px 15px;
background: #fff;
border-radius: 6px;
}
.modal-content .modal-body .btn {
width: 52px;
height: 30px;
display: inline-block;
text-align: center;
color: #fff;
cursor: pointer;
float: right;
margin: 10px;
background: #E00047;
}
.modal-content .modal-body input{
width: 220px;
height: 25px;
border-radius: 4px;
border: 1px solid #999;
padding: 2px 5px;
}
p{
margin: 10px;
}
当然方法不唯一，样式还有布局可以自己改。
接下来是关键。可以把HTML中表格的内容注释掉了。
在项目里建一个文件夹叫data,然后在文件夹中建一个json文件，名字最好跟着HTML的的名字来定，因为如果文件多起来就很难找，
然后json这样写
[
{"name":"小明","nian":"19","fen":"88"},
{"name":"小红","nian":"18","fen":"89"},
{"name":"小二","nian":"28","fen":"99"},
{"name":"小四","nian":"25","fen":"87"},
{"name":"小三","nian":"20","fen":"99"}
]
$.ajax({
type:"get",
url:"data/index1.json?"+Math.random(),
success:function(res){
// console.log(res)
var str = ""
for (var i=0;i<res.length;i++) {
str+='<tr><td>'+res[i].name+'</td><td>'+res[i].nian+'</td><td>'+res[i].fen+'</td><td> <button class="del">删除</button> <button class="alter">修改</button> <button class="view">查看</button></td></tr>'
}
$("table").append(str)
}
});
// 增加
$(document).on("click", ".add", function() {
$(".add-modal").show()
})
$(document).on("click", ".btn", function() {
$(".add-modal").hide()
})
var addList = []
$(document).on("click", ".sure", function() {
addList = []
$(".add-modal").find("input").each(function() {
addList.push($(this).val())
})
var str = '<tr><td>'+addList[0]+'</td><td>'+addList[1]+'</td><td>'+addList[2]+'</td><td> <button class="del">删除</button> <button class="alter">修改</button> <button class="view">查看</button></td></tr>'
$("table").append(str)
})
// 删
$(document).on("click", ".del", function() {
$(this).parents("tr").remove()
})
// 修改
$(document).on("click", ".alter", function() {
$(".alter-modal").show()
})
$(document).on("click", ".btn", function() {
$(".alter-modal").hide()
})
var userList = []
var _this = null
$(document).on("click", ".alter", function() {
_this = $(this).parents("tr")
userList = []
$(this).parent().siblings("td:not(:eq(3))").each(function() {
userList.push($.trim($(this).text()))
})
var oTr = $.trim($(this).parent().siblings().eq(3).text())
$(".alter-modal").find("select").find("option[value=" + oTr + "]").prop("selected", true)
$(".alter-modal").find("input").each(function(i) {
$(this).val(userList[i])
})
})
var changeList = []
$(".alter_ok").click(function() {
changeList = []
$(this).parents(".modal-content").find("input").each(function() {
changeList.push($(this).val())
})
var oVal = $(".alter-modal").find("select").val()
_this.find("td:eq(4)").text(oVal)
_this.find("td:not(:eq(3))").each(function(i) {
$(this).text(changeList[i])
})
})
//查看
$(document).on("click", ".view", function() {
$(".view-modal").show()
})
$(document).on("click", ".btn", function() {
$(".view-modal").hide()
})
var userList = []
var _this = null
$(document).on("click", ".view", function() {
_this = $(this).parents("tr")
userList = []
$(this).parent().siblings("td:not(:eq(3))").each(function() {
userList.push($.trim($(this).text()))
})
var oTr = $.trim($(this).parent().siblings().eq(3).text())
$(".view-modal").find("select").find("option[value=" + oTr + "]").prop("selected", true)
$(".view-modal").find("input").each(function(i) {
$(this).val(userList[i])
})
})
效果图
方法不唯一，我只是简单的把效果做出来，具体还需要改进。