jQuery展示表格点击变色、全选、删除
2017-01-05 11:11
405 查看
看着书上的代码,自己敲了好一阵,发现自己优化后的代码比书上的更简洁,功能也更多,贴出来,留后用。
功能:
表格行点击变背景色、选择删除、全选删除、图片原图显示
效果显示:
代码贴上:
<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 EasyUI API 中文文档 - DataGrid数据表格
- jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
- jQuery EasyUI中对表格进行编辑的实现代码
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
- jQuery LigerUI 使用教程表格篇(1)
- jQuery操作表格(table)的常用方法、技巧汇总
- jQuery表格插件datatables用法总结
- jQuery 表格隔行变色代码[修正注释版]
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
- editable.js 基于jquery的表格的编辑插件
相关文章推荐
- jQuery实例——展示表格点击变色、全选、删除
- JQuery动态操作表格(添加、删除、多选、全选删除行操作)
- jQuery通过点击行来删除HTML表格行的实现示例
- jquery实现表格中点击相应行变色功能
- jQuery通过点击行来删除HTML表格行的实现示例
- 选中表格中相应行的复选框,点击下面的“删除”按钮可以删除相应的行,选中下面的"全选"复选框,则所有行的复选框全部选中,取消则全部取消。 鼠标移动到封面上在旁边显示大图,鼠标移开,大图消失
- jQuery操作Gridview全选,点击checkbox变色,隔行变色,鼠标悬停变色!
- jQuery实现点击该行即可删除HTML表格行
- 使用jQuery通过点击它删除HTML表格行-超简单
- jquery实现表格中点击相应行变色功能
- jQuery轻松实现表格的隔行变色,点击行变色
- Jquery 实现表格全选 反选 取消全选 删除行 增加行
- javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
- jQuery实现点击该行即可删除HTML表格行
- JQuery动态操作表格(添加、删除、多选、全选删除行操作)
- jQuery表格插件(隔行换色、划过变色、全选)
- 实现隔行变色效果升级以及实现表格全选、反选、删除效果
- Jquery表格变色 复选框全选,反选
- 基于jQuery的表格特效(隔行、滑动、点击变色)
- jquery实现删除表格当前点击行