zoukankan      html  css  js  c++  java

  • jQuery实现可编辑表格

    在很多的网页中，这个可编辑表格在许多地方都是非常有用，配合上AJAX技术能够实现很好的用户体验，下面我

    们就jQuery来说明一下可编辑表格的实现步骤

    首先是HTML代码，非常简单

    [html] view plain copy
     
     print?
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>可以编辑的表格</title>  
    5.     <script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>  
    6.     <script type="text/javascript" src="/Ajax/js/edit.js"></script>  
    7.     <link rel="stylesheet" href="/Ajax/css/edit.css" type="text/css"></link>  
    8.   </head>  
    9.     
    10.   <body>  
    11.     <table border="1px">  
    12.         <tr>  
    13.             <td>123123</td>    <td>456456</td>  
    14.         </tr>  
    15.     </table>  
    16.   </body>  
    17. </html>  


    然后是js代码

    [javascript] view plain copy
     
     print?
    1. $(function(){  
    2.     //找到所有的td节点  
    3.     $("td").click(tdclick);  
    4. });  
    5.   
    6. function tdclick(){  
    7.       
    8.         var td = $(this);  
    9.         //1.取出当前的文本内容并且保存起来  
    10.         var text = td.text();  
    11.         //2. 清除当前的td内容  
    12.         td.html("");//也可以用empty()方法  
    13.         //3.建立一个input标签  
    14.         var input = $("<input>");  
    15.         //4.设置文本框里面的值是改写后的内容  
    16.         input.attr("value",text);  
    17.         //4.5响应键盘事件，处理回车  
    18.         input.keyup(function(event){  
    19.             //1.判断是否回车按下  
    20.             //结局不同浏览器获取时间的差异  
    21.             var myEvent = event || window.event;  
    22.             var key = myEvent.keyCode;  
    23.             if(key == 13){  
    24.                 var inputNode = $(this);  
    25.                 //1.保存当前文本框的内容  
    26.                 var inputText = inputNode.val();  
    27.                 //2.清空td里面的内容  
    28.                 inputNode.parent().html(inputText);  
    29.                   
    30.                 td.click(tdclick);  
    31.             }  
    32.         });  
    33.           
    34.         input.blur(function(){  
    35.             var inputNode = $(this);  
    36.             var inputText = inputNode.val();  
    37.             inputNode.parent().html(inputText);  
    38.             td.click(tdclick);  
    39.         });  
    40.           
    41.         //5.把文本框就加入到td里面去  
    42.         td.append(input);  
    43.         //6.需要清除td上面的点击事件  
    44.         //6.5高亮数据  
    45.   
    46.         td.unbind("click");  
    47.         //7.提取文本框里面的值  
    48. }  


    注释写的挺清楚了，这样就实现了可编辑的表格，用户按下回车或者点击一下别的地方就能实现数据的保存
  • 相关阅读:
    GO学习-(31) Go语言操作Elasticsearch
    GO学习-(30) Go语言操作kafka
    GO学习-(29) Go语言操作etcd
    Maven+Spring打Jar包
    话说Session
    Apache Server与多个独立Tomcat集成
    一套Tomcat处理多个域名请求
    Tomcat多实例
    Linux下安装MySQL
    Java Enum
  • 原文地址：https://www.cnblogs.com/lanye/p/5394672.html
Copyright © 2011-2022 走看看