transformer un <td> en zone textarea sur un clic

**JackBeauregard** · 24/09/2006, 23h35

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** · 25/09/2006, 00h25

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** · 25/09/2006, 00h33

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** · 25/09/2006, 01h14

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** · 25/09/2006, 01h29

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** · 25/09/2006, 01h49

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

**lalouve** · 25/09/2006, 02h32

Voilà tu devrais pouvoir te débrouiller avec ça

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
	<title>Test edit td</title>
	<script type="text/javascript">
	function ajout(td, id_ligne){
	  if(td.getAttribute("clicked")==1)return
	  td.setAttribute("clicked", "1");
	   tmp = td.firstChild.nodeValue;
	   td.removeChild(td.firstChild);
 
	   divform = document.createElement("form");
	   divform.setAttribute("action", "taPagePHP.php");
	   divform.setAttribute("method", "post");
 
	   formSubmit = document.createElement("input");
	   formSubmit.setAttribute("type","submit");
	   formSubmit.setAttribute("value","Enregistrer");
 
	   formCancel = document.createElement("input");
	   formCancel.setAttribute("type","button");
	   formCancel.setAttribute("value","Annuler");
 
	   formHidden = document.createElement("input");
	   formHidden.setAttribute("type","hidden");
	   formHidden.setAttribute("value",id_ligne);
 
	   formCancel.onclick = function(){
	   	td.innerHTML = tmp;
		td.setAttribute("clicked", "0");
	   }
 
	   divtexte = document.createElement("textarea");
 
	   divform.appendChild(divtexte);
	   divform.appendChild(formSubmit);
	   divform.appendChild(formCancel);
	   divform.appendChild(formHidden);
 
	   td.appendChild(divform);
	   divtexte.innerHTML = tmp;
	}
	</script>
	<style type="text/css">
	textarea{
	width:200px;
	height:50px;
	font-family:arial;
	font-size:11px;}
	</style>
</head>
 
<body>
<table>
   <tr>
      <td onclick="ajout(this, 1);">
         Ceci est un test.
      </td>
   </tr>
   <tr>
      <td onclick="ajout(this, 2);">
         Ceci est un autre test.
      </td>
   </tr>
   <tr>
      <td onclick="ajout(this, 3);">
         Ceci est encore un autre test.
      </td>
   </tr>
</table>
 
 
</body>
</html>

**JackBeauregard** · 25/09/2006, 15h07

Génial, un grand merci à toi Lalouve

(et à Sheriff et BisounoursJos aussi

)

Petit problème quand même, ça ne fonctionne pas sur IE. Comme c'est pour mon admin c'est pas trop grave mais bon...
Sinon la solution de Sheriff aurait pu être bien à creuser aussi, parce que justement le contenu de mon <td> est déjà dans un div (qui me sert pour utiliser overflow auto).