<script type="text/javascript">
$(function(){
//隔行变色
$("table tr:nth-child(odd)").css("background-color","#eee");
//小图片鼠标移动事件
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();
});
//删除按钮单选框事件
$("#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();
}
})
}
});
//全选复选框单击事件
$("#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);
}
});
});
</script>
</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="images/1.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="images/1.jpg" alt=""/ ></td>
<td>李小利</td>
<td>女</td>
<td>36.60</td>
</tr>
<tr id="2">
<td><input id="Checkbox3" type="checkbox" value="2"/></td>
<td>1003</td>
<td><img src="images/1.jpg" alt=""/ ></td>
<td>李利</td>
<td>男</td>
<td>38.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 alt="" src="images/1.jpg" id="imgTip" class="clsImg">
</body>
</html>
分享到：
相关推荐
jqweui图片上传插件jquery-weui.uploader.js 实现 多图上传，预览，删除，初始化控件，图片赋值加载，获取图片数据。压缩包包含jquery-weui.uploader.js，weui以及示例demo
jQuery File Upload是一款强大的基于jQuery的文件上传插件，它提供了多文件选择、进度条显示、预览、上传取消以及删除等功能。这款插件利用HTML5技术，为现代浏览器提供了先进的文件上传体验，同时通过优雅降级的...
本文将深入解析jQuery File Upload的核心功能和使用方法，帮助你构建出更加完善的图片上传系统。 ### 一、基本功能介绍 1. **多文件上传**：jQuery File Upload支持用户同时选择并上传多个文件，极大地提高了上传...
总结一下，jQuery上传图片预览是通过监听`<input type="file">`元素的`change`事件，读取文件内容，转换为数据URL，然后创建`<img>`元素预览。在实际开发中，可以结合HTML5的File API和其他jQuery插件来提升用户体验...
3. 图片预览：使用FileReader API读取文件内容，`readAsDataURL`方法将文件内容转换为Base64编码的URL，这个URL可以直接用作`<img>`标签的`src`属性，从而实现图片预览。 4. jQuery的事件处理：使用`.on()`方法绑定...
4. **图片预览**：在用户点击缩略图时弹出大图预览，增强用户体验。 5. **加载进度**：显示后台处理的进度，如文件上传、数据加载等。 ### 五、总结 jQuery jBox 2.3 是一款强大的对话框插件，它的易用性和灵活性...
`img`目录则存储了预览用的图片资源，而`js`目录中可能包含了插件的主要脚本文件，例如用于处理图片预览和删除逻辑的jQuery插件代码。 **HTML结构与组件** 在`index.html`中，我们通常会看到一个用于选择图片的`...
在这个项目中，jQuery被用来处理前端的用户交互，如点击事件、图片预览和删除功能。 2. **文件上传**: 在Web应用中，文件上传功能通常涉及到表单提交和HTTP协议。通过`<input type="file">`元素，用户可以选择本地...
`jQuery Uploadify` 还支持文件预览功能，用户在选择文件后，可以预览选定的图片或者其他支持类型的文件，增加了用户交互性。 ### 8. 文件队列管理 上传过程中，文件会形成一个队列，用户可以添加、删除或暂停队列...
5. **插件生态系统**：jQuery 的强大之处还在于其庞大的插件生态，如 DataTables 用于表格操作，Lightbox 用于图片预览，还有许多其他功能性的插件，大大扩展了jQuery的功能范围。 **jQuery API - jQueryAPI-100214...
2. **图片预览**：使用`FileReader`的`readAsDataURL`方法读取图片文件，并将其转化为数据URL，然后设置到`<img>`标签的`src`属性，实现在页面上预览图片。 3. **图片上传到服务器**：通常会使用Ajax异步请求，将...
这个插件支持用户一次性上传多达5张图片，并且具备图片预览和删除功能，为网站的图像管理提供了高效而美观的界面。 首先，我们要了解这个插件的工作原理。在上传过程中，用户选择的图片会先通过前端进行预览，这样...
3.10 综合案例分析—数据删除和图片预览在项目中的应用/75 3.10.1 需求分析/75 3.10.2 效果界面/75 3.10.3 功能实现/77 3.10.4 代码分析/80 3.11 本章小结/81 第4章 jQuery中的事件与应用/82 4.1 事件机制/...
本文将深入探讨如何使用jQuery实现多个图片的上传和回显功能，同时支持图片的删除与回显。 首先，让我们了解“图片上传”这一概念。在Web应用中，用户通常需要上传图片到服务器进行存储或展示。为了实现这个功能，...
这个名为"可预览删除的jQuery多图上传ajax提交.zip"的压缩包，显然包含了一个利用jQuery实现的多图上传功能，并且支持图片预览和删除，同时使用Ajax技术进行异步数据传输。以下将详细讲解这些知识点。 **1. jQuery...
在本文中，我们将深入探讨如何使用jQuery和SVG技术实现多张图片的同时上传和预览功能。这个功能在现代Web应用中非常常见，特别是在涉及到用户上传个人资料图片或产品图片的场景下。通过jQuery的事件处理和SVG的图形...
- 图片预览或视频播放时，创建沉浸式体验。 - 提示用户确认操作，如删除或保存等。 七、总结 jQuery-Overlay作为一款实用的前端组件，提供了创建全局遮罩层的便捷方式。通过理解其工作原理和配置选项，我们可以...
它的上传组件提供了用户友好的图片上传体验，包括上传进度显示、预览和删除功能。 要在ASP.NET Core中集成jqweui的图片上传功能，我们需要做以下几件事： 1. **设置前端**：在HTML页面中引入jqweui的CSS和JS文件，...
综上所述，"jQuery批量图片拖动排序和查看"涉及的技术点包括：jQuery和jQuery UI的基本用法、DOM操作、事件处理、Ajax交互、用户界面设计、以及代码结构和组织。这些知识对于构建动态、交互性强的Web应用至关重要。...