cell editing example with jQuery

celledit.js

// License=WTFPL2
$('#content').on('dblclick', '.editable:not(.cellEditing)', function () {
    var target = $(this),
        input = $('<input type=text>').val(target.text()),
        cancelBtn = $('<button>').text('Cancel'),
        originalValue = target.text(),
        done = false,
        enterFn = function (e) {
            if (done) return;
            if (e.which == 13) {
                beDone();
                target.text($(this).val());
            }
        },
        cancelFn = function (e) {
            if (done) return;
            if (e.relatedTarget && $.contains(target[0], e.relatedTarget)) {
                return;
            }
            beDone();
            target.text(originalValue);
        },
        beDone = function () {
            done = true;
            input.off('keypress', enterFn);
            target.off('focusout', cancelFn);
            cancelBtn.off('click', cancelFn);
            target.empty();
            target.removeClass('cellEditing');
        };

    target.empty();
    target.addClass('cellEditing');
    target.append([input, cancelBtn]);
    input.focus();

    input.on('keypress', enterFn);
    target.on('focusout', cancelFn);
    cancelBtn.on('click', cancelFn);
});