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 - 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
Everest home edition - Télécharger - Informations & Diagnostic
Superantispyware free edition - Télécharger - Antivirus & Antimalwares
Tableaux croisés dynamiques - Guide
Minecraft pocket edition - Télécharger - Éducatifs
Macrium reflect 7 free edition - Télécharger - Sauvegarde

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

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 38480 Date d'inscription Statut Modérateur Dernière intervention 4 746

 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 Statut Membre Dernière intervention 672

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 Statut Membre Dernière intervention 672

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

Que veut dire Carte Graphique OC??

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

Votre réponse

Discussions similaires