Видя, что этой странице 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();