Visto che questa pagina non sia sia a 3 anni e il primo risultato in una ricerca su Google ho pensato che fosse a causa di una risposta più attuale. Dato il peso e la complessità delle opzioni di plug-in sopra, ho pensato che una soluzione più semplice, senza fronzoli e più diretta potesse essere apprezzata anche per chi è alla ricerca di alternative.
Questo sostituisce la cella con un input di testo e invita gli eventi personalizzati in modo da poter gestire qualsiasi caso d'uso che si desidera al momento del salvataggio, chiudere, sfocatura, ecc ...
In questo caso l'unico modo per cambiare il l'informazione nella cella è premere enter, ma è possibile personalizzarla se lo si desidera, ad es. potresti voler risparmiare sulla sfocatura.
In questo esempio è anche possibile premere il tasto Esc per interrompere la modifica e riportare la cella a quello che era. Puoi personalizzarlo se vuoi.
Questo esempio funziona con un singolo clic, ma alcune persone preferiscono il doppio clic, a scelta.
$.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;
}
È possibile applicare in modo selettivo le cellule modificabili da loro collegando in questo modo, o qualsiasi altra cosa ha senso per il vostro caso.
$('.editable').makeEditable();
ho provato, non fa altro che scompare la cellula, lascia vuoto. – mrpatg