看着书上的代码,自己敲了好一阵,发现自己优化后的代码比书上的更简洁,功能也更多,贴出来,留后用。
功能:
表格行点击变背景色、选择删除、全选删除、图片原图显示
效果显示:
代码贴上:
<html> <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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍jQuery通过点击行来删除HTML表格行的实现示例,包括了jQuery通过点击行来删除HTML表格行的实现示例的使用技巧和注意事项,需要的朋友参考一下 jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一。它不仅不会减少在JavaScript编码简单的技术开销,而且也使您的代码的跨浏览器兼容。我已经写了许多关于jQuery教程,这个时候,我也用这个简单的纯实现
本文向大家介绍jQuery实现点击该行即可删除HTML表格行,包括了jQuery实现点击该行即可删除HTML表格行的使用技巧和注意事项,需要的朋友参考一下 jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一。它不仅不会减少在JavaScript编码简单的技术开销,而且也使您的代码的跨浏览器兼容。我已经写了许多关于jQuery教程,这个时候,我也用这个简单的纯实现了。任务是从
本文向大家介绍jquery点击展示与隐藏更多内容,包括了jquery点击展示与隐藏更多内容的使用技巧和注意事项,需要的朋友参考一下 先上效果图 点击前 点击后展开 html代码 jquery代码 css代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍android实现点击图片全屏展示效果,包括了android实现点击图片全屏展示效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了android实现点击图片全屏展示的具体代码,供大家参考,具体内容如下 MainActivity: 布局文件: style: 效果图: 没点击: 点击后: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
类似这个截图里的效果,如何实现点击图表中的一个数据点,能够展示出一个操作的列表?
本文向大家介绍Android 中使用EditText 点击全选再次点击取消全选功能,包括了Android 中使用EditText 点击全选再次点击取消全选功能的使用技巧和注意事项,需要的朋友参考一下 最近在开发浏览器碰到这么一个需求:点击地址栏的时候,需要全选并调出键盘,再次点击就取消全选显示光标。点击屏幕除地址栏其他位置时,键盘隐藏,隐藏光标。 大部分浏览器都是这样的逻辑,这样可以提高用户体验,