脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery隔行变色

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

 更新时间：2013年01月07日 11:13:47   作者：  
项目需求：表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览等等，感兴趣的朋友可以参考下
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函数的等价原生函数代码示例

    jQuery函数的等价原生函数代码示例

    原生方法明显要比jQuery方法快，因为jQuery方法要处理浏览器兼容以及其他一些事情，如果你针对的是现代浏览器，那么使用原生方法会使性能有很大的提升
    2013-05-05
  • JQuery入门——用映射方式绑定不同事件应用示例

    JQuery入门——用映射方式绑定不同事件应用示例

    通过映射的方式，给对象绑定多个事件,可能有很多的童鞋们不从使用过，不过，没有关系本文将一一为您详细介绍，感兴趣的朋友可不要错过了啊，希望本文对你有所帮助
    2013-02-02
  • jquery里的each使用方法详解

    jquery里的each使用方法详解

    有个同事问我each使用方法,我把我知道的用法告诉他.他却说不是这样的.如是在网上小逛了一下,果然用法有很多.下面总结下大慨的使用方法.
    2010-12-12
  • 原生Aajax 和jQuery Ajax 写法个人总结

    原生Aajax 和jQuery Ajax 写法个人总结

    AJAX:即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。本文重点给大家介绍原生Aajax 和jQuery Ajax 个人总结，一起看看吧
    2017-03-03
  • jQuery遍历节点元素方法介绍

    jQuery遍历节点元素方法介绍

    这篇文章介绍了jQuery遍历节点元素的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • jquery设置表单元素为不可用的简单代码

    jquery设置表单元素为不可用的简单代码

    下面小编就为大家带来一篇jquery设置表单元素为不可用的简单代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • jquery实现的超出屏幕时把固定层变为定位层的代码

    jquery实现的超出屏幕时把固定层变为定位层的代码

    相信很多人都上过taobao吧，在taobao的产品列表页有一个浮动的用来排序的浮动层，当你拖动滚动条而导致那个排序栏看不到的时候它会自动变为浮动层，一直固定在那里。
    2010-02-02
  • jquery自定义滚动条插件示例分享

    jquery自定义滚动条插件示例分享

    这篇文章主要介绍了jquery自定义滚动条插件示例,需要的朋友可以参考下
    2014-02-02
  • jQuery实现标题有打字效果的焦点图代码

    jQuery实现标题有打字效果的焦点图代码

    这篇文章主要介绍了jQuery实现标题有打字效果的焦点图代码,可实现幻灯片切换显示时标题同步逐个打印显示的效果,涉及jQuery操作json格式数据及时间函数的相关技巧,需要的朋友可以参考下
    2015-11-11
  • Jquery attr()方法 属性赋值和属性获取详解

    Jquery attr()方法 属性赋值和属性获取详解

    下面小编就为大家带来一篇Jquery attr()方法 属性赋值和属性获取详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考
    2016-04-04

最新评论