利用模态框弹出，jQuery实现table的增删改查。
万俟穆冉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<style>
*{margin: 0px; padding: 0px;}
i{font-style: normal;}
.container{
width: 900px;
margin: 50px auto;
}
.table{
width: 800px;
border: 1px solid #DDDDDD;
text-align: center;
border-collapse: collapse;
}
td{
border: 1px solid #DDDDDD ;
height: 40px;
}
.td_addbtn{
}
.addbtn{
width: 40px;
height: 25px;
border-radius: 4px;
background: #31708F;
color: white;
border: none;
outline: none;
cursor: pointer;
}
.delbtn{
width: 40px;
height: 25px;
border-radius: 4px;
background: #8a6d3b;
color: white;
border: none;
outline: none;
cursor: pointer;
}
.movebtn{
width: 40px;
height: 25px;
border-radius: 4px;
background: #843534;
color: white;
border: none;
outline: none;
cursor: pointer;
}
.viewbtn{
width: 40px;
height: 25px;
border-radius: 4px;
background: #f0ad4e ;
color: white;
border: none;
outline: none;
cursor: pointer;
}
#addmodal{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(0,0,0,0.5);
display: none;
}
#viewmodal{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(0,0,0,0.5);
display: none;
}
#movemodal{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(0,0,0,0.5);
display: none;
}
.modal-dialog{
position: relative;
width: 500px;
margin: 40px auto;
background: white;
border-radius: 5px;
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.modal-header>i{
font-weight: bold;
color: #ADADAD;
float: right;
cursor: pointer;
}
.modal-body {
position: relative;
padding: 15px;
}
.modal-body input{
width: 300px;
border-radius: 4px;
border: 1px solid #DDDDDD;
outline: none;
padding: 10px;
margin: 10px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.addbtn_ok{
width: 40px;
height: 25px;
border-radius: 4px;
background: deepskyblue;
color: white;
border: none;
outline: none;
cursor: pointer;
}
.addbtn_no{
width: 40px;
height: 25px;
border-radius: 4px;
background: darkslateblue;
color: white;
border: none;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<table class="table ">
<thead>
<tr>
<td>姓名</td>
<td>姓别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tr>
<td class="name">张三</td>
<td class="sex">男</td>
<td class="age">20</td>
<td>
<button class="delbtn ">删除</button>
<button class="movebtn ">修改</button>
<button class="viewbtn ">查看</button>
</td>
</tr>
<tr>
<td class="name">李四</td>
<td class="sex">女</td>
<td class="age">21</td>
<td>
<button class="delbtn ">删除</button>
<button class="movebtn ">修改</button>
<button class="viewbtn ">查看</button>
</td>
</tr>
<tr>
<td class="name">赵钱</td>
<td class="sex">不男</td>
<td class="age">22</td>
<td>
<button class="delbtn ">删除</button>
<button class="movebtn ">修改</button>
<button class="viewbtn ">查看</button>
</td>
</tr>
<tr>
<td class="name">孙李</td>
<td class="sex">不女</td>
<td class="age">23</td>
<td>
<button class="delbtn ">删除</button>
<button class="movebtn ">修改</button>
<button class="viewbtn ">查看</button>
</td>
</tr>
<tfoot>
<tr>
<td colspan="4">
<button class="addbtn ">增加</button>
</td>
</tr>
</tfoot>
</table>
<!--增加的模态框-->
<div class="modal addfade" id="addmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<i>X</i>
<h4>会员管理</h4>
</div>
<div class="modal-body">
<p>
姓名：<input type="text" />
</p>
<p>
姓别：<input type="text" />
</p>
<p>
年龄：<input type="text" />
</p>
</div>
<div class="modal-footer">
<button class="addbtn_ok">确定</button>
<button class="addbtn_no">取消</button>
</div>
</div>
</div>
</div>
<!--修改的模态框-->
<div class="modal movefade movemodal" id="movemodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<i>X</i>
<h4>会员管理</h4>
</div>
<div class="modal-body">
<p>
姓名：<input type="text" />
</p>
<p>
姓别：<input type="text" />
</p>
<p>
年龄：<input type="text" />
</p>
</div>
<div class="modal-footer">
<button class="addbtn_ok">确定</button>
<button class="addbtn_no">取消</button>
</div>
</div>
</div>
</div>
<!--查看的模态框-->
<div class="modal viewfade" id="viewmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<i>X</i>
<h4>会员管理</h4>
</div>
<div class="modal-body">
<p>
姓名：<span></span>
</p>
<p>
姓别：<span></span>
</p>
<p>
年龄：<span></span>
</p>
</div>
<div class="modal-footer">
<button class="addbtn_no">取消</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
//增加
var arrAdd=[]
$(document).on("click",".addbtn",function(){
$(".addfade").fadeIn(600)
})
//增加确定
$(document).on("click",".addbtn_ok",function(){
$(".addfade").fadeOut(600)
arrAdd=[]
$('#addmodal').find("input").each(function(){
arrAdd.push($(this).val())
})
var str='<tr><td class="name">'+arrAdd[0]+'</td><td class="sex">'+arrAdd[1]+'</td><td class="age">'+arrAdd[2]+'</td><td><button class="delbtn ">删除</button> <button class="movebtn ">修改</button> <button class="viewbtn ">查看</button></td></tr>'
$("tbody").append(str)
$('#addmodal').find("input").val('')
})
$(document).on("click",".addbtn_no",function(){
$(".addfade").fadeOut(600)
})
$(document).on("click",".modal-header i",function(){
$(".addfade").fadeOut(600)
})
//删除
var del=[]
$(document).on("click",".delbtn",function(){
del=[]
if(confirm("确定删除吗？")){
$(this).parents("tr").fadeOut(300)
}
})
//修改
var arrMove=[];
var _this = null ;
$(document).on("click",".movebtn",function(){
arrMove=[]
_this=$(this).parents("tr")
$(".movefade").fadeIn(600)
$(this).parent().siblings().each(function(){
arrMove.push($(this).text())
})
$(this).parents().find('.movemodal input').each(function(i){
$(this).val(arrMove[i])
})
})
//修改确定
$(document).on("click",".addbtn_ok",function(){
arrMove=[]
$(this).parent().siblings().find('input').each(function(){
arrMove.push($(this).val())
console.log($(this))
})
console.log(arrMove)
$(this).parents().find('.movemodal input').each(function(i){
$(this).val(arrMove[i])
})
_this.find("td").each(function(i){
$(this).text(arrMove[i])
})
$(".movefade").fadeOut(600)
})
//修改取消
$(document).on("click",".addbtn_no",function(){
$(".movefade").fadeOut(600)
})
$(document).on("click",".modal-header i",function(){
$(".movefade").fadeOut(600)
})
//查看
var arrView=[]
$(document).on("click",".viewbtn",function(){
arrView=[]
$(".viewfade").fadeIn(600)
$(this).parent().siblings().each(function(){
arrView.push($(this).text())
})
$(".modal-body").find("p span").each(function(i){
$(this).text(arrView[i])
console.log(arrView)
})
})
//查看取消
$(document).on("click",".addbtn_no",function(){
$(".viewfade").fadeOut(600)
})
$(document).on("click",".modal-header i",function(){
$(".viewfade").fadeOut(600)
})
})
</script>
</body>
</html>
可参考链接：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
类似资料：