`
海欣_海夜
  • 浏览: 17242 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Jquery简单模拟数据删除与图片预览

阅读更多
<%@ 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>

效果如附件所示:
  • 大小: 9.8 KB
分享到:
评论

相关推荐

    超实用的jQuery代码段

    7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停时的图片放大 7.22 淡出...

    Jquery简易好看私人图床源码.zip

    在图床项目中,Jquery可能被用来实现图片的上传、预览、删除等功能。 2. **图片上传功能**:项目可能包含了图片选择、预览、上传到服务器的逻辑。这部分通常涉及HTML5的File API,用于在浏览器中读取文件,以及Ajax...

    Jquery facebook 提示框

    - 图片预览:用户可以无需离开当前页面就能查看大图。 - 表单验证和错误提示:在表单提交之前,可以使用Facebox显示错误信息或额外的验证步骤。 - 内容加载:通过Ajax异步加载并显示详细信息或设置面板。 3. **...

    25种JQuery插件

    jqZoom是一款图片预览插件,它可以实现鼠标悬停时的放大效果,让用户在不离开页面的情况下查看产品细节,广泛应用于电商网站。 9. **jUEditor.rar** jUEditor是一个强大的富文本编辑器,它提供了丰富的编辑功能,...

    高仿微信编辑器(Jquery版本)

    【高仿微信编辑器(Jquery版本)】是一款基于JavaScript库Jquery实现的文本编辑工具,旨在模拟微信内置的富文本编辑体验。这种编辑器在网页应用中常见于消息发布、论坛发帖、博客写作等场景,让用户在浏览器环境下...

    jquery实现的多样式3D切换效果焦点图特效源码.zip

    同时,为了增加用户体验,我们还需要添加指示器和预览图,以便用户了解当前所处的图片位置和即将切换到的图片。 在源码中,我们可以看到,开发者可能使用了数据属性(data attributes)来存储每张图片的信息,如...

    douban-movie:JQuery实现豆瓣电影(移动端)

    5. JSON或其他数据文件:可能包含模拟的电影数据,用于测试和展示。 6. 配置文件:如`.gitignore`(Git版本控制忽略规则)和`README.md`(项目介绍和指南)。 项目可能涉及的JavaScript知识点有: 1. jQuery选择器...

    HTML5仿微信朋友圈样式特效.zip

    这个项目的核心在于利用现代Web技术来提供与微信朋友圈相似的用户体验,如动态加载、图片预览、评论功能等。 首先,HTML5在其中起到了构建页面结构的关键作用。HTML5引入了许多新的标签,如、、、和等,这些标签有...

    Highcharts图表使用说明

    通过与 jQuery、MooTools 或 Prototype 等前端框架结合使用,可以实现从服务器获取实时数据并动态更新图表,为用户提供更加丰富的交互体验。 ##### 2.8 多个轴 Highcharts 支持在同一图表中显示多个 Y 轴或 X 轴,...

    基于Vue+SpringBoot实现的通讯录管理系统源码+项目说明(课程设计).zip

    2.主要针对各个计算机相关专业,包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间,不仅可作为入门进阶,也可直接作为毕设...

    ASP.NET_2.0(C#)实现多文件上传

    - 上传后的文件会以列表的形式展示在页面上,用户可以预览图片和删除已上传的文件。这通常涉及AJAX技术,使得文件上传和删除操作无需刷新整个页面。 9. **异常处理**: - 在处理文件上传时,必须考虑可能出现的...

    仿163网盘无刷新多文件上传系统

    【标题】"仿163网盘无刷新多文件上传系统"揭示了这是一个模拟网易网盘功能的项目,特别强调了其在文件上传过程中实现了无刷新的技术特性。无刷新技术通常指的是用户在交互时,页面不会整体刷新,而是通过Ajax等技术...

    jQueryTreeViewl.rar_TreeView控件_JavaScript_

    在jQuery中,可以利用递归函数来生成树状结构,这是因为树形数据本质上就是一个递归的数据结构,每个节点可以有零个或多个子节点,这个特性可以通过递归函数来模拟。 在描述中提到,这个示例代码不仅包含了jQuery ...

    家乐福超市产品展示效果制作js

    在产品展示部分,可能使用了JavaScript库如jQuery或更现代的框架如React或Vue.js,它们简化了DOM操作,使得添加、删除和更新元素变得更加简单。例如,使用这些库可以轻松地实现商品图片的自动轮播,通过定时器控制每...

    VSCODE下载及插件安装保姆级教程来咯

    21. Image Preview:鼠标悬浮在链接或者装订线(gutter)左边可以预览到图片。 22. SVG Viewer:无需离开编辑器,便可以打开 SVG 文件并查看。 23. Filesize:在底部状态栏显示当前文件大小,点击后还可以看到详细...

    WebUploadTest_上传_

    9. **前端UI设计**:仿照QQ控件,前端界面设计可能注重简洁易用,包括文件预览、取消上传、删除已选文件等操作。 10. **状态管理**:在上传过程中,文件的状态(如已选择、上传中、已完成、失败等)需要在界面上...

Global site tag (gtag.js) - Google Analytics