利用模态框弹出，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>

直接copy代码放进编辑器便可查看效果。