当前位置:  编程技术>jquery

jquery数据删除与隔行变色的实现代码一例

    来源: 互联网  发布时间:2014-09-03

    本文导语:  以下代码实现的功能包括: 表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览 代码如下: Jquery数据管理-数据隔行变色-www. body{font-size:12px} table{width:360px;border-collapse:collapse} table tr ...

以下代码实现的功能包括:
表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览

代码如下:




Jquery数据管理-数据隔行变色-www.







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);}


$(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();
});
});





选项
编号
封面
购书人
性别
购书价



1001

刘明明
女
37.80元



1002

李小明
男
35.60元



1003

张小星
女
45.60元






全选









2、效果图如下所示:


    
 
 

您可能感兴趣的文章:

  • jQuery实现隔行换色(隔行变色)的代码
  • jQuery 表格隔行换色 鼠标高亮行变色的实现代码
  • JQuery实现表格隔行换色(隔行变色)效果代码一例
  • Jquery 隔行变色及鼠标经过变色的代码一例
  • jQuery隔行换色和鼠标经过高亮并显示隐藏内容
  • jQuery实现table隔行换色和鼠标经过变色的两种方法
  • Jquery表格隔行变色的代码
  • Jquery选择器实现隔行变色的代码一例
  • jquery 实现table隔行变色、复选框的选择变色的代码
  • Jquery实现简单的隔行变色效果
  • JQuery 表格隔行变色与突出显示当前行的代码一例
  • 使用简洁的jQuery方法实现隔行换色功能
  • jquery 隔行变色的二个实例代码
  • jQuery 表格隔行变色的代码(附js版)
  • jQuery 隔行变色代码(支持键盘上下键及按Enter选定值)
  • jquery实现隔行变色、鼠标移动变色的小插件
  • jQuery实现表格隔行变色的例子
  • jquery特效 table鼠标滑过变色的实现代码
  • 用jQuery toggleClass 实现鼠标移上变色
  • jquery导航制件jquery鼠标经过变色效果示例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery删除提示框(弹出是否删除对话框)
  • jquery删除提示框弹出是否删除对话框
  • jQuery操作select option选项(增加 删除 修改)
  • Jquery删除元素的代码举例
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • JQuery动态删除Table表格的行与列
  • jquery 删除字符串最后一个字符的方法解析
  • JQuery 删除节点的例子
  • jquery 删除select中option选项
  • jquery删除指定的html标签并保留标签内文本内容的方法
  • jquery代码-如何显示或删除input域中的默认值
  • jquery css类用法(添加、修改与删除css)
  • jQuery动态添加、删除元素的方法
  • jquery删除节点代码
  • jquery实现Select option项的添加、删除、取值
  • jquery判断小数点两位和自动删除小数两位后的数字
  • jquery动态添加删除一行数据实例
  • jQuery删除节点的三个方法即remove()detach()和empty()
  • HTML教程 iis7站长之家
  • 如何从jQuery的ajax请求中删除X-Requested-With
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3