可编辑的表格样式js实现代码

（1）效果：点击表格中任意一个格，表格变为可编辑的输入框，改变后取消此选中表格的点击事件，然后如果按回车键，则将改正后的文本保存在此表格中，按一下回车后恢复点击事件。

（2）涉及知识点：获取当前用户按下键得键码方法

首先火狐需要将方法中传入一个event参数，通过keyCode方法获取当前输入的键码

js代码：

//在页面装载时，让所有的td都拥有一个点击事件

$(document).ready(function() {

    //找到所有的td节点

    var tds = $("td");

    //给所有的td节点增加点击事件

    tds.click(tdclick);

});

 

//td被点击的事件

function tdclick() {

    //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 intputext = inputnode.val();

                //3.清空td里面的内容

            var tdNode = inputnode.parent();

                //4。将保存的文本框的内容填充到td中

            tdNode.html(intputext);

                //5.让td重新拥有点击事件

            tdNode.click(tdclick);

        }

    });

        //5.将文本框加入到td中

    td.append(input);  //也可以用input.appendTo(td)

 

    //5.5让文本框里面的文字被高亮选中

    //需要将jquery的对象转换成dom对象

    var inputdom = input.get(0);

    inputdom.select();

    //6.需要清除td上的点击事件

    td.unbind("click");

}