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  不然会报错误：$未定义。

效果预览：