Jquery實現表格中的查看刪除修改
來源：程序員人生 發布時間：2014-12-24 08:19:09 閱讀次數：3238次
首先我們在學習js的時候就有接觸到表格中的1些操作，那末Jquery是1個兼容多閱讀器的輕量級的javascript庫，它的核心理念是寫的更少，做的更多。
現在就用學到的Jquery來做1個表格中的查看刪除修改感受1下Jquery的強大。
第1步：我們編寫html頁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>查看修改刪除</title>
<link rel="stylesheet" type="text/css" href="table.css">
<script src="http://libs.baidu.com/
jquery/2.0.0/
jquery.js"></script>
<script src="table.js"></script>
</head>
<body>
<table id="table">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>職位</th>
<th>工資</th>
<th>操作</th>
</tr>
<tr>
<td>張3</td>
<td>24</td>
<td>工程師</td>
<td>8000</td>
<td><a href="#" class="view">查看</a><a href="#" class="del">刪除</a><a href="#">修改</a></td>
</tr>
</table>
<div class="popDiv">
<p><strong>姓名：</strong><span></span></p>
<p><strong>年齡：</strong><span></span></p>
<p><strong>職位：</strong><span></span></p>
<p><strong>工資：</strong><span></span></p>
<a href="#" class="close">關閉</a>
</div>
</body>
</html>
注：這里援用Jquery時用的是Jquery 1.10.2版本 用的不是本地文件而是百度的CDN。
第2步：編寫樣式
#table{
border:1px solid #abcdef;
border-collapse:collapse;
width:600px;
}
tr{height:30px;}
th {
border:1px solid #abcdef;
}
td{
border:1px solid #abcdef;
text-align:center;
}
td a{
margin-right:5px ;
color:#f00;
}
.popDiv{
width:500px;
padding:10px;
border:1px solid red;
position:absolute;
left:50%;
top:100px;
background:#fff;
display:none;
z-index:4;
}
.popDiv p{
border-bottom:1px solid red;
}
最后效果如圖：
最后：編寫的js代碼
$(document).ready(function () {
$('.view').click(function(){
//添加遮罩層
var maskHeight=$(document).height();
var maskWidth=$(document).width();
$('<div class="mask"></div>').appendTo($('body'));
$('div.mask').css({
'opacity':0.4,
'background':'#000',
'position':'absolute',
'left':0,
'top':0,
'height':maskHeight,
'width':maskWidth,
'z-index':2
});
//獲得表格中的數據
var arr=[];
$(this).parent().siblings().each(function(){
arr.push($(this).text());
});
$('.popDiv').show().children().each(function(i){
$(this).children('span').text(arr[i]);
});
//關閉
$('.close').click(function(){
$(this).parent().hide();
$('.mask').remove();//注意這里不能用hide，由于會不斷生成mask
});
});
//刪除
$('.del').click(function(){
$(this).parents('tr').remove();
});
});
當點擊查看時： 
點擊關閉遮罩消失，點擊刪除便可刪除。修改這里就不放代碼了，有興趣的可以自己動手寫寫。相信譽js寫過顯示和遮罩這個功能的用Jquery就體會到了它的強大。
總結：在寫移除遮罩的時候想固然的也跟點擊關閉的時候用.hide但是在火狐調試器下面視察到了每當點擊1次查看然后關閉，遮罩層雖然是消失了但是DOM樹下每次都會多產生1個div,所以得用移除。不是功能正常了就萬事無憂了，最重要的是怎樣優化使得代碼的效力更高。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
