1. JqueryEdit.html
 
< link rel ="stylesheet" type ="text/css" href ="css/table.css" >
< script type ="text/javascript" src ="jslib/jquery-1.2.6.js" > </script>
       < script type ="text/javascript" src ="jslib/jqueryEdit.js" > </script>

< table >
       < tr > < td >用户名 </td>
         < td >密码 </td>
       </tr>
       < tr >
         < td >Sean </td>
         < td >123456 </td>
       </tr>
     </table>
 
2. jqueryEdit.js
 
//在页面加载时，让所有的td拥有一个点击事件
$(document).ready( function(){
   var tds = $( "td");
  tds.click(tdClick);
});

function tdClick(){
   //保存当前的td节点
     var td = $( this);
     //取出当前td节点的文本内容并保存起来
     var text = td.text();
     //清空td里面的内容
    td.html(""); //也可以是td.empty();
     //建立一个文本框
     var input = $( "<input>");
     //设置文本框的值是刚保存起来的
    input.attr( "value",text);
     //将文本框加入到td中
    td.append(input);
     //让文本框里的文字高亮选中
     var inputDom = input.get(0);
    inputDom.select();
     //取消td的点击事件
    td.unbind( "click");
       //让文本框响应键盘事件
    input.keyup( function(event){
       var myEvent = event || window.event;
       var keyCode = myEvent.keyCode;
       //判断是否回车键按下
       if(keyCode == 13){
         //获得文本框
         var inputNode = $( this);
         //保存文本框的值
         var inputText = inputNode.val();
         //获得td节点
         var tdNode = inputNode.parent();
         //设置td的值
        tdNode.html(inputText);
         //让td重新拥有点击事件
        tdNode.click(tdClick);
      }
    });
    input.blur( function(){
       var inputNode = $( this);
       var inputText = inputNode.val();
       var tdNode = inputNode.parent();
      tdNode.html(inputText);
      tdNode.click(tdClick);
    });
  }
 
3.table.css
 
table,td{
  border-collapse: collapse; /*让相邻边框合并*/
  border: 1px solid black;
}