版权声明：本文为大都督作者的原创文章，未经 大都督 允许也可以转载，但请注明出处，谢谢！ 共勉！ https://blog.csdn.net/qq_37335220/article/details/85201357
1.效果图
2.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery-数据删除和图片预览再项目中的应用</title>
<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: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=#ECE9D8);}
</style>
</head>
<body>
<table>
<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/pig.jpg" alt="" /></td>
<td>大都督</td>
<td>男</td>
<td>35.60 元</td>
</tr>
<tr id="1">
<td><input id="Checkbox2" type="checkbox"
value="1"/></td>
<td>1002</td>
<td><img src="../img/pig.jpg" alt="" /></td>
<td>大都督1</td>
<td>女</td>
<td>37.80 元</td>
</tr>
<tr id="2">
<td><input id="Checkbox3" type="checkbox"
value="2"/></td><td>1003</td>
<td><img src="../img/pig.jpg" alt="" /></td>
<td>大都督2</td>
<td>女</td>
<td>45.60 元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span><input id="chkAll"
type="checkbox" />全选</span>
<span><input id="btnDel" type="button" value="删除"
class="btn" /></span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="../img/pig.jpg"/>
<script src="../jquery.min.js"></script>
<script type="text/javascript">
$(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){
//设置提示图片src属性
$("#imgTip").attr("src", this.src)
//设置提示图片的位置
.css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"})
//显示图片
.show(1000);
})
//小图片鼠标移出事件
$("table tr td img").mouseout(function(){
//隐藏图片
$("#imgTip").hide();
})
});
</script>
</body>
</html>