<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery学习系统-数据删除与图片预览在项目中的使用</title>
<link href="/res/common.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
table{
width:360px;
border-collapse:collapse;
}
table tr th,td{
border:1px solid #666;
text-align:center;
}
table tr td img{
border:1px solid #CCC;
padding:3px;
width:20px;
height:16px;
cursor:hand;
}
table tr td span{
float:left;
padding-left:12px;
}
table tr th{
background-color:#ccc;
height:32px;
}
.clsImg{
position:absolute;
border:1px solid #ccc;
padding:3px;
width:85px;
height:120px;
background-color:#eee;
display:none;
}
.btn{
border:1px solid #666;
padding:2px;
width:50px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);
}
</style>
<script type="text/javascript" src="/res/jquery-1.6.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tablemain tr:nth-child(odd)").css("background-color","#eee");
/**全选复选框事件*/
$("#chkAll").click(function(){
if(this.checked){//如果全选被选中
$("#tablemain tr td input[type=checkbox]").attr("checked",true);
}else{//如果全选没有被选中
$("#tablemain tr td input[type=checkbox]").attr("checked",false);
}
});
/**点击删除按钮事件*/
$("#btnDel").click(function(){
var selectCount=$("#tablemain tr td input:checked").length;//获取选中的所有checkbox选中项
if(selectCount!=0){
$("#tablemain tr td input[type=checkbox]").each(function(index){
if(this.checked){
$("#tablemain tr[id="+index+"]").remove();
}
});
}else{
alert("未选中删除数据");
}
});
/**小图片鼠标移动事件*/
//初始化提示图片位置
var x=5;
var y=15;
$("#tablemain tr td img").mousemove(function(e){
$("#imgTip").attr("src",this.src).css({
"top":(e.pageY+y)+"px",
"left": (e.pageX+x)+"px"
}).show(3000);
});
/**小图片鼠标移出事件*/
$("#tablemain tr td img").mouseout(function(e){
$("#imgTip").hide();//隐藏图片
});
});
</script>
</head>
<body>
<div align="center">
<table id="tablemain">
<tr>
<th>选项</th>
<th>编号</th>
<th>图片</th>
<th>类型</th>
<th>创建人</th>
<th>创建时间</th>
</tr>
<tr id="0">
<td><input id="Checkbox1" type="checkbox" value="0"/></td>
<td>1001</td>
<td><img src="/img/expert-l.png" alt=""/></td>
<td>专家</td>
<td>张三</td>
<td>2012-12-31</td>
</tr>
<tr id="1">
<td><input id="Checkbox2" type="checkbox" value="1"/></td>
<td>1002</td>
<td><img src="/img/messagesend-l.png" alt=""/></td>
<td>信息</td>
<td>李四</td>
<td>2013-01-01</td>
</tr>
<tr id="2">
<td><input id="Checkbox3" type="checkbox" value="2"/></td>
<td>1003</td>
<td><img src="/img/problem-l.png" alt=""/></td>
<td>问题</td>
<td>王五</td>
<td>2013-01-02</td>
</tr>
<tr id="3">
<td><input id="Checkbox4" type="checkbox" value="3"/></td>
<td>1004</td>
<td><img src="/img/project-l.png" alt=""/></td>
<td>项目</td>
<td>老六</td>
<td>2013-01-03</td>
</tr>
<tr id="4">
<td><input id="Checkbox5" type="checkbox" value="4"/></td>
<td>1005</td>
<td><img src="/img/require-l.png" alt=""/></td>
<td>需求</td>
<td>麻子</td>
<td>2013-01-04</td>
</tr>
</table>
<table id="table2">
<tr>
<td style="text-align:left;height:28px;">
<span>
<input id="chkAll" type="checkbox"/>全选
</span>
<span><input id="btnDel" type="button" class="btn" value="删除"/></span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="" />
</div>
</body>
</html>
[size=large][color=red]效果如附件所示:[/color][/size]