Jquery édition de tableaux
Résolu
meuhlol
Messages postés
1896
Date d'inscription
Statut
Membre
Dernière intervention
-
meuhlol Messages postés 1896 Date d'inscription Statut Membre Dernière intervention -
meuhlol Messages postés 1896 Date d'inscription Statut Membre Dernière intervention -
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 !
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 !
A voir également:
- Jquery édition de tableaux
- Everest home edition - Télécharger - Informations & Diagnostic
- Superantispyware free edition - Télécharger - Antivirus & Antimalwares
- Edition video windows - Guide
- Tableaux croisés dynamiques - Guide
- Minecraft pocket edition - Télécharger - Éducatifs
4 réponses
Bonsoir,
$('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();
});
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
Que faire ?
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 ?
