Jquery简单模拟数据删除与图片预览-优快云博客

本文介绍了一个基于jQuery实现的数据删除功能及图片预览效果的示例代码。该示例通过简单的表格展示了如何利用jQuery进行批量数据删除，并在鼠标悬停时显示图片的放大预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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>