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 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
vue+iview实现分页及查询功能
Nov 17 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
浅析PHP Socket技术
2013/08/02 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
激活 ActiveX 控件
2006/10/09 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python中删除某个元素的方法解析
2019/11/05 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
C和C++经典笔试题附答案解析
2014/08/18 面试题
文职个人求职信范文
2013/09/23 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
2014年物流工作总结
2014/11/25 职场文书
南极大冒险观后感
2015/06/05 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript