jQuery展示表格点击变色、全选、删除


Posted in Javascript onJanuary 05, 2017

看着书上的代码,自己敲了好一阵,发现自己优化后的代码比书上的更简洁,功能也更多,贴出来,留后用。

功能:

表格行点击变背景色、选择删除、全选删除、图片原图显示

效果显示:

jQuery展示表格点击变色、全选、删除

代码贴上:

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
Vue生命周期示例详解
Apr 12 Javascript
vue.js实例todoList项目
Jul 07 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 #Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 #Javascript
jQuery选择器实例应用
Jan 05 #Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 #Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 #Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 #Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 #Javascript
You might like
JS实现php的伪分页
2008/05/25 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
python爬虫用mongodb的理由
2020/07/28 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
网络安全方面的面试题
2016/01/07 面试题
人力资源总监工作说明
2014/03/03 职场文书
文明村创建实施方案
2014/03/27 职场文书
班主任新年寄语
2014/04/04 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
师德师风自查总结
2014/10/14 职场文书
python如何获取网络数据
2021/04/11 Python
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android
Tomcat弱口令复现及利用
2022/05/06 Servers