jQuery展示表格点击变色、全选、删除怎么实现

作者:袖梨 2022-06-25

看着书上的代码,自己敲了好一阵,发现自己优化后的代码比书上的更简洁,功能也更多,贴出来,留后用。

功能:

表格行点击变背景色、选择删除、全选删除、图片原图显示

效果显示:

代码贴上:

代码如下 复制代码
javascript"src="jquery-1.7.2.min.js">
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}
$(function(){
//点击表格行变色
$('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();
});
//点击全选
$('#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();
}
})
}
});
});
选项 编号 封面 购书人 性别 够书价
1001 李小明 35.6元 1002 王明 28.9元 1003 皮特 34.3元 2356 爱丁堡 23.3元
全选

相关文章

精彩推荐