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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
JQuery小知识
Oct 15 Javascript
jquery offset函数应用实例
Nov 14 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
一个php作的文本留言本的例子(二)
2006/10/09 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
Yii2单元测试用法示例
2016/11/12 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python多进程编程技术实例分析
2014/09/16 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python创建学生管理系统
2019/11/22 Python
简单了解python元组tuple相关原理
2019/12/02 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
如何使用Pytorch搭建模型
2020/10/26 Python
C++的几个面试题附答案
2016/08/03 面试题
美容院店长岗位职责
2014/04/08 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
给客户的检讨书
2014/12/21 职场文书
财务负责人岗位职责
2015/02/03 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书