基于jQuery实现表格的查看修改删除


Posted in Javascript onAugust 01, 2016

效果图:

基于jQuery实现表格的查看修改删除

HTML:

<table id="table">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职位</th>
      <th>薪资</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>23</td>
      <td>前端工程师</td>
      <td>10000</td>
      <td>
        <a href="###" class="view">查看</a>
        <a href="#" class="del">删除</a>
        <a href="#" class="modify">修改</a>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>33</td>
      <td>JAVA程序猿</td>
      <td>12000</td>
      <td>
        <a href="#" class="view">查看</a>
        <a href="#" class="del">删除</a>
        <a href="#" class="modify">修改</a>
      </td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>美工</td>
      <td>9000</td>
      <td>
        <a href="#" class="view">查看</a>
        <a href="#" class="del">删除</a>
        <a href="#" class="modify">修改</a>
      </td>
    </tr>
  </table>
  <div class="popDiv">
    <p><strong>姓名:</strong><span></span></p>
    <p><strong>年龄:</strong><span></span></p>
    <p><strong>职位:</strong><span></span></p>
    <p><strong>薪资:</strong><span></span></p>
    <a href="#" class="close">关闭</a>
  </div>
  <div class="modifyDiv">
    <p><strong>姓名:</strong><input type="text"></p>
    <p><strong>年龄:</strong><input type="text"></p>
    <p><strong>职位:</strong><input type="text"></p>
    <p><strong>薪资:</strong><input type="text"></p>
    <a href="#" class="yes">确定</a>
    <a href="#" class="close">取消</a>
  </div>

CSS:

#table{
    border:1px solid #ccc;
    border-collapse:collapse;
    width:600px;}
  #table tr{height:30px;}
  #table tr:nth-child(2n){background-color:#eee;}
  #table tr th, td{border:1px solid #ccc;text-align: center;

  }
  td a{
    color:red;
  }
  .popDiv{
    width:500px;
    border:1px solid purple;
    position:absolute;
    top:50%;left:50%;
    margin-left:-250px;
    margin-top:-100px;
    background:#fff;
    padding:10px;
    display:none;
    z-index:3;
    border:1px solid #ccc;
  }
  .popDiv p{border:1px solid #ccc;padding:5px;}
  .modifyDiv{
    width:500px;
    border:1px solid purple;
    position:absolute;
    top:50%;left:50%;
    margin-left:-250px;
    margin-top:-100px;
    background:#fff;
    padding:10px;
    display:none;
    z-index:3;
    border:1px solid #ccc;
  }
  .modifyDiv p{border:1px solid #ccc;padding:5px;}

JQ:

$(function(){
    //查看
    $("td a.view").click(function(){
      /**添加遮罩层*/
      var maskHeight=$(document).height();
      var maskWidth=$(document).width();
      $("<div class='mask'></div>").appendTo($("body"));
      $("div.mask").css({
        "opacity":0.4,
        "background":"#000",
        "position":"absolute",
        "left":0,
        "top":0,
        "width":maskWidth,
        "height":maskHeight,
        "z-index":2
      })
      var arr=[];
      $(this).parent().siblings().each(function(){
        arr.push($(this).text());
      });
      $(".popDiv").show().children().each(function(i){
        $(this).children("span").text(arr[i]);
      });
      $(".close").click(function(){
        $(this).parent().hide();
        $(".mask").remove();
      });
    });
    //删除
    $("a.del").click(function(){
      $(this).parents("tr").remove();
    });
    /*修改功能*/
  })

//在页面装载时,让所有的td都拥有点击事件
$(document).ready(function(){
  //找到所有td节点
  var tds = $("td").not(":last-child");
  //给所有的td节点增加点击事件
  tds.dblclick(tdclick);
});

function tdclick(){
  var clickfunction = this;
  //0,获取当前的td节点
  var td = $(this);
  //1,取出当前td中的文本内容保存起来
  var text = $(this).text();
  //2,清空td里边内同
  td.html("");
  //3,建立一个文本框,也就是建一个input节点
  var input = $("<input>");
  //4,设置文本框中值是保存起来的文本内容
  input.attr("value",text);
  //4.5让文本框可以相应键盘按下的事件
  input.keyup(function(event){
    //记牌器当前用户按下的键值
    var myEvent = event || window.event;//获取不同浏览器中的event对象
    var kcode = myEvent.keyCode;
    //判断是否是回车键按下
    if(kcode == 13){
      var inputnode = $(this);
      //获取当前文本框的内容
      var inputext = inputnode.val();
      //清空td里边的内容,然后将内容填充到里边
      var tdNode = inputnode.parent();
      tdNode.html(inputext);
      //让td重新拥有点击事件
      tdNode.click(tdclick);
    }
  }).blur(function(){
      var inputnode = $(this);
      //获取当前文本框的内容
      var inputext = inputnode.val();
      //清空td里边的内容,然后将内容填充到里边
      var tdNode = inputnode.parent();
      tdNode.html(inputext);
      //让td重新拥有点击事件
      tdNode.click(tdclick);
    });
  //5,把文本框加入到td里边去
  td.append(input);
  //5.5让文本框里边的文章被高亮选中
  //需要将jquery的对象转换成dom对象
  var inputdom = input.get(0);
  inputdom.select();

  //6,需要清楚td上的点击事件
  td.unbind("click");
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
Javascript复制实例详解
Jan 28 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery自制提示框tooltip改进版
Aug 01 #Javascript
Three.js学习之文字形状及自定义形状
Aug 01 #Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 #Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 #Javascript
基于原生JS实现图片裁剪
Aug 01 #Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 #Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 #Javascript
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
详解Python中的type和object
2018/08/15 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python简单实现9宫格图片实例
2020/09/03 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
超市创业计划书
2014/04/24 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
开票证明
2015/06/23 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书