可编辑的表格

1脚本jqueryedit.js

// 在页面装载时，让所有的td都有一个点击事件
$(document)ready( function () {
    //找到所有的td节点
    var tds=$("td");
    //给所有的td节点增加点击事伯
    tds.click(function(){
      //0保存当前的td节点
      var td=$(this);
        //1取出td里面的内容
        var text=td.text();
        //2清空td里面的内容
        td.html("");//也可以用td.empty();
        //3建立一个文本框，也就是input的元素节点
        var input=$("<input>");
        //4设置文本框的值是保存起来的文本内容
        input.attr("value",text);//设置属性值
        //4.5让文本框可以响应键盘按下事件，主要用于处理回车确认
        input.keyup(function(event){
          0.获取当前用户按下的键值
          var myEvent=event||window.event;
          var kcode=myEvent.keyCode;
            1.判断是否是回车按下
            if(kcode==13){
                var inputnode=${this};
                //2.保存当前文本框的内容
          var inputtext=inputnode.val();
                //3.清空td里面的肉容
                var tdNode=inputnode.parent();
                //4.将保存的文本框的空容填充到td中
                tdNode.html(inputtext);
                //5.让td重新拥有点击事件
                tdNode.click();
            }
        });
        //5将文本框加入到td中
        td.append(input);//也可以用input.appendTo(td);加添节点
        //5.5让文本框里面的文字被高亮选中
        //需要将jquery的对象转换成dom对象
        var inputdom=input.get(0);
        inputdom.select();
        //6移除点击事件
        td.unbind("click");
    });
} );

2页面jqueryEdit.html

< html >
< head >
< script  type ="text/javascript"  src ="jslib/jquery.js" ></ script >
< script  type ="text/javascript"  src ="jslib/jqueryedit.js" ></ script >
< head >
< body >
< table  border ="1px" >
     < tr >
         < td > 123123 </ td >
         < td > 456456 </ td >
     </ tr >
</ table >
</ body >
</ html >