jQuery实例——展示表格点击变色、全选、删除
生活随笔
收集整理的這篇文章主要介紹了
jQuery实例——展示表格点击变色、全选、删除
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
看著書(shū)上的代碼，自己敲了好一陣，發(fā)現(xiàn)自己優(yōu)化后的代碼比書(shū)上的更簡(jiǎn)潔，功能也更多，貼出來(lái)，留后用~~
功能：
表格行點(diǎn)擊變背景色、選擇刪除、全選刪除、圖片原圖顯示
效果顯示：
代碼貼上：
<!DOCTaYPE 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-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
body{font-size:12px}
table{width:360px;border-collapse:collapse}
table tr th,td{border:solid 1px #666;text-align:center}
table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:pointer}
table tr td span{float:left;padding-left:12px}
table tr th{background-color:#ccc;height:32px;background-color:#fff}
.clsImg{position:absolute;border:solid 1px #ccc;padding:3px;background-color:#eee;display:none;cursor:pointer}
.btn{border:solid 1px #666;padding:2px;width:50px;filter:progd:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ECE9D8);cursor:pointer}
</style>
<body>
<script type="text/javascript">
$(function(){
//點(diǎn)擊表格行變色
$('tr').click(function(){
if((this.style.backgroundColor=='')||(this.style.backgroundColor=='rgb(255, 255, 255)')){
this.style.cssText='background-color:#CCC';
}else{
this.style.cssText='background-color:#fff';
}
})
//放大圖顯示
$('.a').mousemove(function(e){
$('#imgTip').show().attr('src',this.src);
$('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});
});
$('.a').mouseover(function(e){
$('#imgTip').show().attr('src',this.src);
$('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});
});
$('.a').mouseout(function(){
$('#imgTip').hide();
});
//點(diǎn)擊全選
$('#checkAll').click(function(){
if(this.checked){
$(':checkbox').attr('checked',true);
}else{
$(':checkbox').attr('checked',false);
}
});
//刪除部分與全部
$('.btn').click(function(){
if($('#checkAll').attr('checked')){
$('table tr td :checkbox:not("#checkAll")').each(function(index){
$('#'+this.value).remove();
});
}else{
$(':checkbox:not("#checkAll")').each(function(index){
if(this.checked){
$('#'+this.value).remove();
}
})
}
});
});
</script>
<table>
<tr>
<th>選項(xiàng)</th>
<th>編號(hào)</th>
<th>封面</th>
<th>購(gòu)書(shū)人</th>
<th>性別</th>
<th>夠書(shū)價(jià)</th>
</tr>
<tr id="0">
<td><input type="checkbox" name="" id="checkbox1" value="0" /></td>
<td>1001</td>
<td><img src="1.jpg" title="" alt="" class="a" /></td>
<td>李小明</td>
<td>男</td>
<td>35.6元</td>
</tr>
<tr id="1">
<td><input type="checkbox" name="" id="checkbox2" value="1" /></td>
<td>1002</td>
<td><img src="2.jpg" title="" alt="" class="a" /></td>
<td>王明</td>
<td>男</td>
<td>28.9元</td>
</tr>
<tr id="2">
<td><input type="checkbox" name="" id="checkbox3" value="2" /></td>
<td>1003</td>
<td><img src="3.jpg" title="" alt="" class="a" /></td>
<td>皮特</td>
<td>女</td>
<td>34.3元</td>
</tr>
<tr id="3">
<td><input type="checkbox" name="" id="checkbox3" value="3" /></td>
<td>2356</td>
<td><img src="4.jpg" title="" alt="" class="a" /></td>
<td>愛(ài)丁堡</td>
<td>男</td>
<td>23.3元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span><input type="checkbox" name="" id="checkAll" />全選</span>
<span><input type="button" value="刪除" class="btn" /></span>
</td>
</tr>
</table>
<img src="1.jpg" title="" alt="" id="imgTip" class="clsImg" />
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/picaso/archive/2012/04/07/2435752.html
總結(jié)
以上是生活随笔為你收集整理的jQuery实例——展示表格点击变色、全选、删除的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [转载]VC6下安装STLport-5.
- 下一篇： ASP.NET温故而知新学习系列之ASP