【JQuery】可直接编辑的表格

【JQuery实战视频教程】

功能：创建一个表格，用户单击某个单元格后，可以直接修改单元格文本。

   在编辑状态下，用户可按回车键确认修改，按ESC键撤销修改。

效果：

思路：

当用户点击某个单元格后，立即向该单元格内插入一个文本框，将它的宽、高都设置成与单元格相的数值。用户确认输入后，清空该单元格内的所有HTML代码，然后把内容设置为用户刚刚输入的文本。

HTML代码：

[html]  view plain  copy

1. <table align="center">  
2.             <tr>  
3.                 <td>学号</td>  
4.                 <td>姓名</td>  
5.             </tr>  
6.             <tr>  
7.                 <td>001</td>  
8.                 <td>dog</td>  
9.             </tr>  
10.             <tr>  
11.                 <td>002</td>  
12.                 <td>cat</td>  
13.             </tr>  
14.             <tr>  
15.                 <td>003</td>  
16.                 <td>pig</td>  
17.             </tr>  
18.         </table>  

JavaScript代码:

[javascript]  view plain  copy

1. $(function(){  
2.     $("td").click(function(event){  
3.         //td中已经有了input,则不需要响应点击事件  
4.         if($(this).children("input").length > 0)  
5.             return false;  
6.       
7.         var tdObj = $(this);  
8.         var preText = tdObj.html(); //得到当前文本内容  
9.         var inputObj = $("<input type='text' />"); //创建一个文本框元素  
10.           
11.         tdObj.html(""); //清空td中的所有元素  
12.         inputObj  
13.             .width(tdObj.width()) //设置文本框宽度与td相同  
14.             .height(tdObj.height())  
15.             .css({border:"0px",fontSize:"17px",font:"宋体"})  
16.             .val(preText)  
17.             .appendTo(tdObj) //把创建的文本框插入到tdObj子节点的最后  
18.             .trigger("focus") //用trigger方法触发事件  
19.             .trigger("select");  
20.               
21.         inputObj.keyup(function(event){  
22.             if(13 == event.which) //用户按下回车  
23.             {  
24.                 var text = $(this).val();  
25.                 tdObj.html(text);  
26.             }  
27.             else if(27 == event.which) //ESC键  
28.             {  
29.                 tdObj.html(preText);  
30.             }  
31.         });  
32.           
33.         //已进入编辑状态后，不再处理click事件  
34.         inputObj.click(function(){  
35.             return false;  
36.         });  
37.     });  
38. });  

版权声明：本文为博主原创文章，转载请注明出处和原作者。