jQuery实例——展示表格点击变色、全选、删除
看着书上的代码,自己敲了好一阵,发现自己优化后的代码比书上的更简洁,功能也更多,贴出来,留后用~~
功能:
表格行点击变背景色、选择删除、全选删除、图片原图显示
效果显示:
代码贴上:
<!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.7.2.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:pointer} table tr td span{float:left;padding-left:12px} table tr th{background-color:#ccc;height:32px;background-color:#fff} .clsImg{position:absolute;border:solid 1px #ccc;padding:3px;background-color:#eee;display:none;cursor:pointer} .btn{border:solid 1px #666;padding:2px;width:50px;filter:progd:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ECE9D8);cursor:pointer}</style><body><script type="text/javascript"> $(function(){//点击表格行变色 $('tr').click(function(){if((this.style.backgroundColor=='')||(this.style.backgroundColor=='rgb(255, 255, 255)')){this.style.cssText='background-color:#CCC'; }else{this.style.cssText='background-color:#fff'; } }) //放大图显示 $('.a').mousemove(function(e){ $('#imgTip').show().attr('src',this.src); $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'}); }); $('.a').mouseover(function(e){ $('#imgTip').show().attr('src',this.src); $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'}); }); $('.a').mouseout(function(){ $('#imgTip').hide(); }); //点击全选 $('#checkAll').click(function(){if(this.checked){ $(':checkbox').attr('checked',true); }else{ $(':checkbox').attr('checked',false); } }); //删除部分与全部 $('.btn').click(function(){if($('#checkAll').attr('checked')){ $('table tr td :checkbox:not("#checkAll")').each(function(index){ $('#'+this.value).remove(); }); }else{ $(':checkbox:not("#checkAll")').each(function(index){if(this.checked){ $('#'+this.value).remove(); } }) } }); });</script> <table><tr><th>选项</th><th>编号</th><th>封面</th><th>购书人</th><th>性别</th><th>够书价</th></tr><tr id="0"><td><input type="checkbox" name="" id="checkbox1" value="0" /></td><td>1001</td><td><img src="1.jpg" title="" alt="" class="a" /></td><td>李小明</td><td>男</td><td>35.6元</td></tr><tr id="1"><td><input type="checkbox" name="" id="checkbox2" value="1" /></td><td>1002</td><td><img src="2.jpg" title="" alt="" class="a" /></td><td>王明</td><td>男</td><td>28.9元</td></tr><tr id="2"><td><input type="checkbox" name="" id="checkbox3" value="2" /></td><td>1003</td><td><img src="3.jpg" title="" alt="" class="a" /></td><td>皮特</td><td>女</td><td>34.3元</td></tr><tr id="3"><td><input type="checkbox" name="" id="checkbox3" value="3" /></td><td>2356</td><td><img src="4.jpg" title="" alt="" class="a" /></td><td>爱丁堡</td><td>男</td><td>23.3元</td></tr></table><table><tr><td style="text-align:left;height:28px"><span><input type="checkbox" name="" id="checkAll" />全选</span><span><input type="button" value="删除" class="btn" /></span></td></tr></table><img src="1.jpg" title="" alt="" id="imgTip" class="clsImg" /></body></html>
转载于:https://www.cnblogs.com/picaso/archive/2012/04/07/2435752.html
jQuery实例——展示表格点击变色、全选、删除相关推荐
- php jquery 全选删除,jQuery+php简单实现全选删除的方法
jQuery+php简单实现全选删除的方法 发布于 2017-08-06 10:13:21 | 66 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertex ...
- jquery的attr和removeAttr实现checkbox全选和取消全选问题
jquery的attr和removeAttr实现checkbox全选和取消全选问题 问题说明: 一个全选和取消全选的功能,界面效果图如下 点击全选checkbox则所有checkbox被选中或者取消选 ...
- JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
2019独角兽企业重金招聘Python工程师标准>>> JQuery是一个非常容易上手的框架,但是有很多东西需要我们深入学习的. 判断checkbox是否被选中网上有选多种写法,这里 ...
- 点击编辑框全选内容java_Android 中使用EditText 点击全选再次点击取消全选功能
最近在开发浏览器碰到这么一个需求:点击地址栏的时候,需要全选并调出键盘,再次点击就取消全选显示光标.点击屏幕除地址栏其他位置时,键盘隐藏,隐藏光标. 大部分浏览器都是这样的逻辑,这样可以提高用户体验, ...
- php全选删除,php+ajax简单实现全选删除的方法
本文实例讲述了php+ajax简单实现全选删除的方法.分享给大家供大家参考,具体如下: 删除 ↑全选checkbox ↑为删除项,同一命名class为ckb,方便操作,同时将id值巧妙的放入input ...
- Mac OS开发—Xcode给Mac应用添加编辑快捷键(剪切 复制 粘贴 全选 删除 撤销 重做)功能
前言 笔者做Windows开发的,无奈公司有Mac OS的项目需要维护,之前没有编辑菜单的功能,需要笔者加上这个功能,笔者只能硬着头皮上.还好会c++,Mac应用里面一般都会用object-c 也可以 ...
- php全选删除文件,一个简单的PHP全选删除数据
各位帮忙看看,还要修改什么!! <--------表单页面(index.php)---------> /* 链接数据库和网站配置信息 */ ?> 全选删除 function All( ...
- 网易企业邮箱删除的的邮件服务器,网易企业邮箱进行全选删除移动操作步骤说明...
使用问题 您的位置: 首页> 使用问题 网易企业邮箱进行全选删除移动操作步骤说明 发布时间:2019-04-15 使用万网企业邮箱webmail时,如对现有邮件需要删除,可参考以下不同删除邮件方 ...
- vi编辑器全选删除命令ggVGd 全选复制命令(转载)
博文转载自互联网,有删改,如有侵权请及时联系删除 vi编辑器全选删除命令为 ggVGd ggVG 稍微解释一下上面的命令 gg 让光标移到首行,在vim才有效,vi中无效 V 是进入Visual( ...
最新文章
- 引入外部样式失败的可能原因
- gorm物理删除:unscoped用法
- 定义[nextTick、事件循环]
- php 父进程id,PHP pcntl_fork创建进程,复制父进程内存空间上下文
- 工作中遇到的前后台联调的一些规则
- 第1章 异常产生异常处理
- python做问卷调查赚钱的软件_在网上做调查问卷能挣钱吗?靠谱吗
- 开放的在线客服系统Live Zilla
- MAVEN 修改为阿里数据源
- BFM(Bus Functional Model )--总线功能模型
- 英文版oracle数据库不能复制粘贴,win10 plsql没法复制 粘贴
- 腾讯云购买服务器操作步骤
- 如何根据自己的需要培养游戏开发技能?又一篇游戏编程入门指南
- ffmpeg转换MP4为mp3格式
- 安装HP WebInspect时,SQLServer2008安装不上咋办
- 直流变频电机驱动的技术原理及特点
- 提取.bank音频包。 Extract .bank audio files
- android 高德地图河流,周边数据-创建地图-开发指南-Android 室内地图SDK | 高德地图API...
- Matlab_参数数量可变_笛卡尔积_Cartesian product
- 吃鸡游戏跑毒和倍镜开发
热门文章
- [PAL编程规范]SAP HANA PAL多项式回归预测分析Polynomial Regression编程规范FORECASTWITHPOLYNOMIALR(预测)...
- 在文本每一行的行首和行尾都插入特定的相同字符或文本
- scala tail recursive优化,复用函数栈
- ubuntu下codeblocks起步
- 移植uboot第七步:支持DM9000
- React、Vue、Angular对比 ---- 介绍及优缺点
- vue.use无非就是为Vue对象注入新的方法和属性
- Wireshark网络抓包(四)——工具
- 解决git提交敏感信息(回退git版本库到某一个commit)
- 迭代器模式和组合模式混用