Jquery édition de tableaux

Résolu/Fermé

meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 - 14 août 2020 à 23:38
meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 - 15 août 2020 à 22:51

Bonjour,

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
Macrium reflect 7 free edition - Télécharger - Sauvegarde
Tableaux croisés dynamiques - Guide
Everest home edition - Télécharger - Informations & Diagnostic
Fusionner deux tableaux excel - Guide
Superantispyware free edition - Télécharger - Antivirus & Antimalwares

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
15 août 2020 à 00:33

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();
      
		});

Réponse 2 / 4

jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
15 août 2020 à 08:18

 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>

Réponse 3 / 4

meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
15 août 2020 à 01:23

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 ?

Réponse 4 / 4

meuhlol Messages postés 1896 Date d'inscription mardi 24 juillet 2007 Statut Membre Dernière intervention 30 novembre 2021 672
15 août 2020 à 22:51

Merci ça marche !

pour le </tr>, il est fermé dans le code, c'est dans l'exemple ici que j'ai omis le slash

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)

Que veut dire Carte Graphique OC??

ou sont les bananes ?

code ascii

Discussions similaires

Newsletters