Jquery编辑表格

以下是Jquery插件实现的编辑表格代码：

function tdclick(obj) {
    //1,获取当前的td节点
    var td = $(obj);
    //2,取出当前td中的文本内容保存起来
    var text = td.text();
    //3，清空td里的文本
    td.html("");
    //4,建立一个文本框，也就是建一个input节点
    var input = $("<input>");
    //5,设置文本框中值是保存起来的文本内容
    input.attr("value", text);
    //6,让文本框可以相应键盘按下的事件
    input.keyup(function (event) {
        //当前用户按下的键值
        var myEvent = event || window.event;//获取不同浏览器中的event对象
        var kcode = myEvent.keyCode;
        //判断是否是回车键按下
        if (kcode == 13) {
            var inputnode = $(this);
            //获取当前文本框的内容
            var inputext = inputnode.val();
            //清空td里边的内容,然后将内容填充到里边
            var tdNode = inputnode.parent();//获取父节点td
            tdNode.html(inputext);//赋值给td
            //让td重新拥有点击事件
            tdNode.click(tdclick);
        }
    }).blur(function () {//当输入域失去焦点 (blur) 时
        var inputnode = $(this);
        //获取当前文本框的内容
        var inputext = inputnode.val();
        //清空td里边的内容,然后将内容填充到里边
        var tdNode = inputnode.parent();//获取父节点td
        tdNode.html(inputext);//赋值给td
        //让td重新拥有点击事件
        tdNode.click(tdclick);
    });
    //7，把文本框加入到td里边去
    td.append(input);
    //8,让文本框里边的文章被高亮选中
    //需要将jquery的对象转换成dom对象
    var inputdom = input.get(0);
    inputdom.select();
}

调用编辑表格方法只需要在html的table表格的单元格中里面中添加一个点击事件即可以实现，方便简洁，下面是html代码：

实现效果如下：