jquery入门—数据删除与隔行变色以及图片预览


Posted in Javascript onJanuary 07, 2013

1、功能需求:表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览
2、示例代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> 数据管理 </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> 
</script> 
<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=#ECE9DB);} 
</style> 
<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){ 
$("#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(); 
}); 
}); 
</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/img03.jpg" alt=""></td> 
<td>刘明明</td> 
<td>女</td> 
<td>37.80元</td> 
</tr> 
<tr id="1"> 
<td><input id="Checkbox2" type="checkbox" value="1"/></td> 
<td>1002</td> 
<td><img src="Images/img04.jpg" alt=""></td> 
<td>李小明</td> 
<td>男</td> 
<td>35.60元</td> 
</tr> 
<tr id="2"> 
<td><input id="Checkbox3" type="checkbox" value="2"/></td> 
<td>1003</td> 
<td><img src="Images/img08.jpg" alt=""></td> 
<td>张小星</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="Images/img03.gif"/> 
</BODY> 
</HTML>

3、效果图预览
jquery入门—数据删除与隔行变色以及图片预览
Javascript 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
Javascript remove 自定义数组删除方法
Oct 20 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
vue如何进行动画的封装
Sep 26 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 #Javascript
jquery入门—访问DOM对象方法
Jan 07 #Javascript
jQuery.clean使用方法及思路分析
Jan 07 #Javascript
js获取height和width的方法说明
Jan 06 #Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 #Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 #Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 #Javascript
You might like
编译问题
2006/10/09 PHP
PHP新手上路(九)
2006/10/09 PHP
生成php程序的php代码
2008/04/07 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
django创建超级用户过程解析
2019/09/18 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
Python pip使用超时问题解决方案
2020/08/03 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
小学生秋游活动方案
2014/02/23 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
入党转正申请书范文
2019/05/20 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL