Учитывая, что этой странице уже 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();
person
Strixy
schedule
21.07.2014
