基于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 相关文章推荐
Javascript拓展String方法小结
Jul 08 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
js实现随机8位验证码
Jul 24 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
了解一点js的Eval函数
2012/07/26 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
Express的路由详解
2015/12/10 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Unicode和Python的中文处理
2017/03/19 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
委托证明模板
2014/09/16 职场文书
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle