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 相关文章推荐
动态读取JSON解析键值对的方法
Jun 03 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
写一个Vue Popup组件
Feb 25 Javascript
Vue.js中的组件系统
May 30 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
详解CocosCreator项目结构机制
Apr 14 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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
模仿OSO的论坛(四)
2006/10/09 PHP
谈谈新手如何学习PHP
2006/12/23 PHP
php集成开发环境详解
2019/09/24 PHP
javascript 函数式编程
2007/08/16 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python中的高级数据结构详解
2015/03/27 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Python列表切片操作实例总结
2019/02/19 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
董事长秘书工作总结
2015/08/14 职场文书
运动会广播稿20字
2015/08/19 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS