transformer un <td> en zone textarea sur un clic

Version imprimable

24/09/2006, 23h35
JackBeauregard

transformer un <td> en zone textarea sur un clic

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 ?

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

Code:

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:

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>

25/09/2006, 00h33
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.
25/09/2006, 01h14
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.
@+

Salut,

le code de BisounoursJos fonctionne avec juste 1 modif :

Code:

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é
}

25/09/2006, 01h49
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 :oops:

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

Code:

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>

25/09/2006, 15h07
JackBeauregard

Génial, un grand merci à toi Lalouve :hola: (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).
26/09/2006, 21h40
lalouve

Y'a pas de quoi ;)

Par contre ça fonctionne bien sous IE chez moi (je viens de retester pour la forme). :mouarf:
26/09/2006, 23h49
JackBeauregard

Bah c'est parce que j'ai testé sur IE7 peut être ?