java jquery table变色_jQuery实例——展示表格点击变色、全选、删除

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();

}

})

}

});

});

选项	编号	封面	购书人	性别	够书价

全选