<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
NULL 博文链接：https://dong717.iteye.com/blog/1967737
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 事件机制/...
1、功能需求：表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览 2、示例代码如下： 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD&...
7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停时的图片放大 7.22 淡出...
3.4.1 内部插入节点方法 3.4.2 外部插入节点方法 3.5 复制节点 3.6 替换节点 3.7 包裹节点 3.8 遍历元素 3.9 删除元素 3.10 综合案例分析—数据删除和图片预览在项目中的应用 3.10.1 需求分析 ...
jsp、jquery、jQuery.filer+后台JAVA SpringMcv 实现推拽，批量上传功能。 1、实现数据报表展示 2、新增，编辑，图片删除（物理删除） 3、优化图片预览，点击放大（再次点击隐藏） 4、优化上传图片时动态传递参数，...
jQuery File Upload 是一个 jQuery 图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。 特征： 1、多文件上传： 允许一次选择...
文件上传-时机选择及预览-2 图片验证码 KindEditor基本使用和文件操作 作业 第25周 今日内容概要 博客系统示例预览 组合搜索组件 JSONP跨域请求jQuery方式 JSONP跨域请求本质 XSS过滤以及单例模式 博客系统表结构...
■修复:节点删除入回收站Bug(批量删除不入回收站,不显示子节点) ■增加:扩展发票模块,抽取最近的五次不重复的发票数据 ■扩展:增加内容置顶与置顶到期时间字段, ■移除:内容模型已不用的字段(Cast_File,Pronum,...
删除的提示界面也一样，整个系统都是这样的一个二次确认提示框。  第五个就是通讯录管理模块，正儿八经的管理通讯录的数据，可以看到密密麻麻的测试数据，如下图所示。 ![输入...
10、为附件箱图片增加预览功能 11、修复登录验证码开关的小BUG 12、CSS调整，增加style文件夹，统一放置CSS 13、修改签到组弹出框样式 14、修改在线更新版本对比代码段，修正了一个无外网连接时AJAX机制报错的BUG ...
5)增加提取编辑器内容中FLASH及FLV播放地址的功能,与提取图片地址使用方法相同(getflvurl和getflashurl属性)! 6)优化了控件上传页面中的部分JS脚本! 2008/4/28 Version 5.0.3 For VS2005/2008 Updates: 1)修正二...
HadSky轻论坛程序为个人原创PHP系统，作者为蒲乐天，后端基于puyuetianPHP框架驱动，前端基于puyuetianUI框架驱动，默认编辑器为puyuetianEditor富文本编辑器，其他非原创框架及驱动JQuery.js及Font-Awesome字体库。...
1.新增【管理员专区】->【数据处理管理】功能，可以批量替换数据和处理因敏感词而无法正常打开网页问题 2.纠正后台文章编辑，获取编辑器图片无法获取网络图片路径问题 3.后台文章管理，标题后面加入是否含缩略图的...
方法2：利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数，例： $('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'}); 特别说明：两种初始化方法只能选择其中一种使用，如果...
Xiuno BBS 是国产的一套面向千万级数据量设计的开源论坛软件，基于 PHP/MySQL/MongoDB/Memcached/Linux C/JQuery/ 等技术，采用 MVC AOP 模式组织代码，旨在解决BBS站点负载过高的问题，是大中型站点比较理想的选择...