欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2016-08-01 作者:macanfa 来源:转载
这篇文章主要为大家详细介绍了基于jQuery实现表格的查看修改删除,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

效果图:

HTML:

  
姓名 年龄 职位 薪资 操作
张三 23 前端工程师 10000 查看 删除 修改
李四 33 JAVA程序猿 12000 查看 删除 修改
王五 25 美工 9000 查看 删除 修改

姓名:

年龄:

职位:

薪资:

关闭

姓名:

年龄:

职位:

薪资:

确定 取消

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();
      $("
").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 = $(""); //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"); }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。

相关推荐