以下代码实现的功能包括：
表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览

代码如下：

Jquery数据管理-数据隔行变色-www.







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:hand}
table tr td span{float:left;padding-left:12px}
table tr th{background-color:#ccc;height:32px}
.clsImg{position:absolute;border:solid 1px #ccc;padding:3px;width:85px;height:120px;background-color:#eee;display:none}
.btn{border:#666 1px solid;padding:2px;width:50px;filter:progid;DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9DB);}


$(function(){
/**隔行变色**/
$("table tr:nth-child(odd)").css("background-color","#eee");
/**全选复选框单击事件**/
$("#chkAll").click(function(){
if(this.checked){
$("table tr td input[type=checkbox]").attr("checked",true);
}else{
$("table tr td input[type=checkbox]").attr("checked",false);
}
});
/**删除按钮单击事件**/
$("#btnDel").click(function(){
var intL = $("table tr td input:checked:not('#chkAll')").length;
if(intL !=0){
$("table tr td input[type=checkbox]:not('#chkAll')"). each(function(index){
if(this.checked){
$("table tr[id="+this.value+"]").remove();
}
});
}
});
/**小图片鼠标移动事件**/
var x = 5; var y = 15;
$("table tr td img").mousemove(function(e){
$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(3000);
});
/**小图片鼠标移出事件**/
$("table tr td img").mouseout(function(){
$("#imgTip").hide();
});
});





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



1001

刘明明
女
37.80元



1002

李小明
男
35.60元



1003

张小星
女
45.60元






全选

2、效果图如下所示：

您可能感兴趣的文章: