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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
video.js添加自定义组件的方法
Dec 09 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
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
几种tab切换详解
2017/02/03 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
班组安全员工作职责
2014/02/01 职场文书
行政助理的岗位职责
2014/02/18 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
新闻编辑求职信
2014/04/09 职场文书
捐书倡议书
2014/08/29 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
台风停课通知
2015/04/24 职场文书
乒乓球比赛通知
2015/04/27 职场文书
光荣之路观后感
2015/06/12 职场文书
高中体育课教学反思
2016/02/16 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书