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_01_理解内存分配原理分析
Oct 11 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
js canvas实现擦除动画
Jul 16 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 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
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php中curl使用指南
2015/02/05 PHP
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
python获取图片颜色信息的方法
2015/03/18 Python
python获取本地计算机名字的方法
2015/04/29 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
django解决订单并发问题【推荐】
2019/07/31 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python实现自动打卡的示例代码
2020/10/10 Python
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
会计实习生自我鉴定
2013/12/12 职场文书
2014的自我评价
2014/01/13 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2016春节慰问信范文
2015/03/25 职场文书
运动会宣传稿100字
2015/07/23 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python