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之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
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
资料注册后发信小技巧
2006/10/09 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python中Flask框架简单入门实例
2015/03/21 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
防灾减灾日活动总结
2014/08/26 职场文书
导游词开场白
2015/01/31 职场文书
大学生入党自荐书
2015/03/05 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis