今天绵阳动力网络公司为大家介绍关于JQuery实现可直接编辑的表格,实例分析了jQuery动态操作编辑表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

功能：

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

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

效果如下图：

思路：

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

HTML代码：

<table align="center">
 <tr>
   <td>学号</td>
   <td>姓名</td>
 </tr> 
 <tr>
   <td>001</td>
   <td>dog</td>
 </tr>
 <tr>
   <td>002</td>
   <td>cat</td>
 </tr>
 <tr>
   <td>003</td>
   <td>pig</td>
 </tr>  
</table>

JavaScript代码:

$(function(){
   $("td").click(function(event){
    //td中已经有了input,则不需要响应点击事件
   if($(this).children("input").length > 0)
     return false; 
   var tdObj = $(this); 
   var preText = tdObj.html();
   //得到当前文本内容
    var inputObj = $("<input type='text' />");
   //创建一个文本框元素
    tdObj.html(""); //清空td中的所有元素
    inputObj 
    .width(tdObj.width()) 
   //设置文本框宽度与td相同 
    .height(tdObj.height()) 
    .css({border:"0px",fontSize:"17px",font:"宋体"})
    .val(preText) 
    .appendTo(tdObj) 
   //把创建的文本框插入到tdObj子节点的最后
    .trigger("focus")
    //用trigger方法触发事件
     .trigger("select");
    inputObj.keyup(function(event){ 
    if(13 == event.which) 
   //用户按下回车
     {  
    var text = $(this).val();  
    tdObj.html(text); 
    } 
    else if(27 == event.which) 
   //ESC键 
    {  
    tdObj.html(preText);   
  }    
});   
 //已进入编辑状态后，不再处理click事件
    inputObj.click(function(){
     return false;  
  });  
 }); 
 });