Jquery實(shí)現(xiàn)表格中的查看刪除修改
來(lái)源：程序員人生 發(fā)布時(shí)間：2014-12-24 08:19:09 閱讀次數(shù)：3230次
首先我們?cè)趯W(xué)習(xí)js的時(shí)候就有接觸到表格中的1些操作，那末Jquery是1個(gè)兼容多閱讀器的輕量級(jí)的javascript庫(kù)，它的核心理念是寫(xiě)的更少，做的更多。
現(xiàn)在就用學(xué)到的Jquery來(lái)做1個(gè)表格中的查看刪除修改感受1下Jquery的強(qiáng)大。
第1步：我們編寫(xiě)html頁(yè)
<!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">關(guān)閉</a>
</div>
</body>
</html>
注：這里援用Jquery時(shí)用的是Jquery 1.10.2版本 用的不是本地文件而是百度的CDN。
第2步：編寫(xiě)樣式
#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;
}
最后效果如圖：
最后：編寫(xiě)的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
});
//獲得表格中的數(shù)據(jù)
var arr=[];
$(this).parent().siblings().each(function(){
arr.push($(this).text());
});
$('.popDiv').show().children().each(function(i){
$(this).children('span').text(arr[i]);
});
//關(guān)閉
$('.close').click(function(){
$(this).parent().hide();
$('.mask').remove();//注意這里不能用hide，由于會(huì)不斷生成mask
});
});
//刪除
$('.del').click(function(){
$(this).parents('tr').remove();
});
});
當(dāng)點(diǎn)擊查看時(shí)： 
點(diǎn)擊關(guān)閉遮罩消失，點(diǎn)擊刪除便可刪除。修改這里就不放代碼了，有興趣的可以自己動(dòng)手寫(xiě)寫(xiě)。相信譽(yù)js寫(xiě)過(guò)顯示和遮罩這個(gè)功能的用Jquery就體會(huì)到了它的強(qiáng)大。
總結(jié)：在寫(xiě)移除遮罩的時(shí)候想固然的也跟點(diǎn)擊關(guān)閉的時(shí)候用.hide但是在火狐調(diào)試器下面視察到了每當(dāng)點(diǎn)擊1次查看然后關(guān)閉，遮罩層雖然是消失了但是DOM樹(shù)下每次都會(huì)多產(chǎn)生1個(gè)div,所以得用移除。不是功能正常了就萬(wàn)事無(wú)憂了，最重要的是怎樣優(yōu)化使得代碼的效力更高。
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
