JQuery实现可编辑表格

/// <reference path="jquery-1.4.1.min.js" />
$(function (event) {
    //$("tbody tr:even").css("background-color", "#ece9d8");
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $('form').each(function () { event.preventDefault(); });
        }
    });//屏蔽回车提交表单事件
    var numTd = $(".edittd");
    numTd.click(function (envet) {
        var tdObj = $(this);
        if (tdObj.children("input").length > 0) {
            return false;
        }
        var txtold = tdObj.text();
        var inputObj = $("<input type='text'/>").css("border", "none").width(tdObj.width())
         .css("font-size", "14px").css("background-color", "#F0F0F0").css("color", "blue").val(txtold);
        tdObj.html("").append(inputObj);
        inputObj.trigger("focus");
        inputObj.click(function () {
            return false;
        });
        inputObj.keyup(function (event) {//enter 保存  esc取消
            var keycode = event.which;
            if (keycode == 13) {
                var inputText = $(this).val();
                tdObj.text(inputText);
            }
            if (keycode == 27) {
                tdObj.html(txtold);
            }
        });
    });

});

注意：页面引用时先引用jquery-1.4.1.min.js  不然会报错误：$未定义。

效果预览：