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 相关文章推荐
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JavaScript小技巧整理
Dec 30 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
利用js对象弹出一个层
2008/03/26 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
Python中unittest用法实例
2014/09/25 Python
Python使用MONGODB入门实例
2015/05/11 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python实例化对象的具体方法
2020/06/17 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
抽象类和接口的区别
2012/09/19 面试题
中文教师求职信
2014/02/22 职场文书
小学校长汇报材料
2014/08/20 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
群众路线表态发言材料
2014/10/17 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
党支部意见范文
2015/06/02 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle