Convert a table field to input

translationInput.jquery.js

(function($) {
    "use strict";

    $.fn.translationInput = function(options) {
        options = $.extend({
            defaultClass: ".translationField",
            defaultRoute: "update"
        }, options);

        return this.each(function(i, v) {
            var index = $(v).data('key');

            $(v).find(options.defaultClass).each(function (i, v) {
                var tableRow = $(v);

                tableRow.on('click', function (e) {
                    var oldValue = tableRow.text();

                    var translationInput = $(
                        '<input>',
                        {
                            value: oldValue,
                            type: 'text',
                            class: 'form-control',
                            blur: function () {
                                tableRow.text(this.value);

                                if (oldValue != this.value) {
                                    $.ajax({
                                        url: options.defaultRoute,
                                        data: {
                                            id: index,
                                            value: this.value
                                        },
                                        type: 'POST'
                                    });
                                }
                            },
                            keyup: function (e) {
                                if (e.which == 13 || e.which == 27) {
                                    translationInput.blur();
                                }
                            }
                        }
                    ).appendTo(tableRow.empty()).focus();
                })
            });
        });
    }
} (jQuery));

Example: https://jsfiddle.net/meysampg/0jv6rb5g