Discussion :

[JackBeauregard]

Bonjour,

Je souhaite faire un truc sympa sur l'admin de mon site, mais je dois reconnaître être une pine en javascript.

Voilà ce que je voudrais :
J'ai une liste de message, qui s'affiche dans un tableau, chaque message dans une cellule <td>.
En cliquant sur celle-ci, ou éventuellement en cliquant sur un bouton "modifier", je voudrais que le <td> se tranforme en <textarea> avec le contenu à l'intérieur, pret à modifier. Puis je valide et zou, pas besoin de changer de page.

Pourriez-vous m'aider à faire cela s'ils-vous plait ?

[Bisûnûrs]

Je pense qu'il faudrait faire un truc dans le style, tu peux chercher dans cette voie là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function ajout(){
   tmp = document.getElementById("texte").firstChild.nodeValue;
 
   document.getElementById("test").removeChild(document.getElementById("texte"));
 
   divtexte = document.createElement("textarea");
 
   document.getElementById("test").appendChild(divtexte);
   divtexte.appendChild(tmp);
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<table>
   <tr>
      <td id="test" onclick="ajout();">
         <div id="texte">Ceci est un test.</div>
      </td>
   </tr>
</table>

[JackBeauregard]

Merci pour ta réponse BisounoursJos !

Par contre ça marche pas du tout... En fait il ne se passe rien quand on clique dessus, pour mieux dire.

[Sheriff]

salut !
tu peux avoir dans ledit td un div et un text area...
il te suffira d'alterner les attributs display pour basculer entre les deux...
tu modifiera le div avec la propriété innerHTML et le textarea avec la propriété value.
@+

[lalouve]

Salut,

le code de BisounoursJos fonctionne avec juste 1 modif :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function ajout(){
   tmp = document.getElementById("texte").firstChild.nodeValue;
 
   document.getElementById("test").removeChild(document.getElementById("texte"));
 
   divtexte = document.createElement("textarea");
 
   document.getElementById("test").appendChild(divtexte);
   divtexte.innerHTML = tmp; // Cette ligne a changé
}

[JackBeauregard]

Ok merci pour toutes vos réponses.

Alors voilà ce qui se passe avec le code Lalouve :

J'ai ma liste de 10 messages, chacun dans un <td> du tableau.
Je clique n'importe lequel des 10 messages et c'est le premier de la liste qui se retrouve dans un tout petit textarea.
Ensuite je ne peux plus en cliquer aucun, ni revenir à l'affichage normal sans textarea.

Pour que ce soit au poil, il faudrait donc :

- Pouvoir attribuer une taille au textarea (qui d'ailleur doit s'insérer dans un form avec submit)
- Que le message cliqué soit celui qui se transforme en textarea.
- Pouvoir en cliquer plusieurs et non qu'un seul et si possible tous les valider au besoin.

Après y'a un autre souci d'affichage à cause d'une autre div, mais si on peut régler ça d'abord le reste je peux me débrouiller.
J'espère que je ne m'abuse pas trop