Jquery édition de tableaux
Résolu
Bonjour,
J'utilise ce code pour rendre les "cellules" de ma <table> éditables :
En cliquant sur une "cellule" il crée un <input> dans lequel il place le texte existant dans <td>. Tout à l'air d'être correcte sauf un gros bémol :
Quand je reclique dans le champ de texte, il m’efface le contenu déjà écrit. C'est embêtant.
Cela vient de $(this).empty()).focus();
Si j'enlève .empty, il laisse le texte existant dans <td> et crée un champ de texte juste en dessous. C'est moche et cela ne marche pas très bien non plus.
Comment modifier ce code, pour qu'on puisse cliquer et recliquer autant de fois qu'on veut, tant qu'on a pas validé par la touche entrée (ou cliqué à l'extérieur) il efface pas le texte présent, ni pendant sa saisie.
Merci par avance les amis !
Bonne soirée !
--
(____(_bdKey____________()~
Pensez à cliquer sur "Résolu" si votre problème est réglé.
J'utilise ce code pour rendre les "cellules" de ma <table> éditables :
$('td').on('click', function (){
var input = $('<input>', {
value: $(this).text(),
type: 'text',
blur: function(){
$(this).parent("td").text($(this).val());
$(this).hide();
},
keyup: function(e) {
if (e.which === 13)
input.blur();
}
}).appendTo($(this).empty()).focus();
});
En cliquant sur une "cellule" il crée un <input> dans lequel il place le texte existant dans <td>. Tout à l'air d'être correcte sauf un gros bémol :
Quand je reclique dans le champ de texte, il m’efface le contenu déjà écrit. C'est embêtant.
Cela vient de $(this).empty()).focus();
Si j'enlève .empty, il laisse le texte existant dans <td> et crée un champ de texte juste en dessous. C'est moche et cela ne marche pas très bien non plus.
Comment modifier ce code, pour qu'on puisse cliquer et recliquer autant de fois qu'on veut, tant qu'on a pas validé par la touche entrée (ou cliqué à l'extérieur) il efface pas le texte présent, ni pendant sa saisie.
Merci par avance les amis !
Bonne soirée !
--
(____(_bdKey____________()~
Pensez à cliquer sur "Résolu" si votre problème est réglé.
4 réponses
-
ModérateurBonsoir,
$('td').on('click', function (){ var input = $('<input>', { value: $(this).text(), type: 'text', blur: function(){ $(this).parent("td").text($(this).val()); $(this).hide(); }, keyup: function(e) { if (e.which === 13) input.blur(); }, click:function(){ return false; } }).appendTo($(this).empty()).focus(); });
-
Modérateur
function addrow(){ $('td') .off( "click" ); $('#myTable>tbody').append(.....
De plus, tu feras gaffe... tu ne fermes pas ton TR...
il manque un / devant le dernier</tr>
-
Merci !
Un autre soucis : après l'ajout de nouvelle ligne en recliquant sur la première, ça m'efface le texte.
J'ajoute les lignes du tableau dynamiquement<button type="button" onclick="addrow();">Ajouter une ligne</button>
function addrow(){ $('#myTable').append('<tr><td>........</td><tr>'); editTablo(); }
//et l'autre bout du code est dans une fonction function editTablo(){ $('td').on('click', function (){ var input = $('<input>', { ...............
Que faire ?
-
Merci ça marche !
pour le </tr>, il est fermé dans le code, c'est dans l'exemple ici que j'ai omis le slash
