Видя, как эта страница как 3-х лет, и первый результат поиска Google, я думал, что это было из-за более тока ответ. Учитывая вес и сложность вариантов плагина выше, я подумал, что для тех, кто ищет альтернативы, может быть оценено более простое, без излишеств, более прямое решение.
Это заменяет ячейку таблицы с ввода текста и вызывает пользовательские события, так что вы можете справиться с любой случай использования вы хотите на сохранить, закрыть, размытие, и т.д. ...
В этом случае единственный способ изменить информация в ячейке - нажать клавишу ввода, но вы можете настроить ее, если хотите, например. вы можете сэкономить на размытии.
В этом примере вы также можете нажать клавишу Esc, чтобы прекратить редактирование и вернуть ячейку к тому, что было. Вы можете настроить это, если хотите.
В этом примере работает один клик, но некоторые люди предпочитают двойной щелчок, ваш выбор.
$.fn.makeEditable = function() {
$(this).on('click',function(){
if($(this).find('input').is(':focus')) return this;
var cell = $(this);
var content = $(this).html();
$(this).html('<input type="text" value="' + $(this).html() + '" />')
.find('input')
.trigger('focus')
.on({
'blur': function(){
$(this).trigger('closeEditable');
},
'keyup':function(e){
if(e.which == '13'){ // enter
$(this).trigger('saveEditable');
} else if(e.which == '27'){ // escape
$(this).trigger('closeEditable');
}
},
'closeEditable':function(){
cell.html(content);
},
'saveEditable':function(){
content = $(this).val();
$(this).trigger('closeEditable');
}
});
});
return this;
}
Вы можете выборочно применять редактируемые ячейки, прикрепив их, как это так, или все, что имеет смысл для вашего случая.
$('.editable').makeEditable();
Я попробовал, все это делает исчезает клетка, оставляет его пустым. – mrpatg