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. }  


注释写的挺清楚了，这样就实现了可编辑的表格，用户按下回车或者点击一下别的地方就能实现数据的保存

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lanye/p/5394672.html