D'une cellule à un champ texte

**Darkaurora** · 09/10/2013, 13h59

Bonjour, Je souhaite transformer un cellule de tableau en champ texte. Je ne souhaite pas seulement qu'un textarea remplace ma cellule, je souhaite fondre le meilleurs des propriétés d'une cellule et le meilleur des propriétés d'un textarea.

Une idée?

**MisterPur** · 10/10/2013, 11h09

Bonjour,

Euh c'est quoi la finalité de faire ça ? De plus je ne sais pas ce qui est pour toi le meilleur de l'un et le meilleur de l'autre.
Si c'est pour les propriétés css du tableau je te conseil plutôt de regarder la propriété CSS display avec les valeur 'table', 'table-row', 'table-cell'

Si tu éclaircie sur ces points, je pourrais surement t'aider.

**SpaceFrog** · 10/10/2013, 11h15

un vieux bout de code si ça peut t'aider

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type='text/css'>
td,#saisie { border:solid 1px black;
     			width:100px;
     			font-family:verdana;
     			font-size:12px;
     			line-height:20px;
     			}
#saisie {color:red;}
html body {margin:0;}
</style>
<script type='text/javascript'>
 var currentCell
function edit(Obj){
  currentCell=Obj; 
  var editbox=document.getElementById('saisie')
  editbox.style.top=currentCell.offsetTop+'px';
  editbox.style.left=currentCell.offsetLeft+'px';
  editbox.style.width=currentCell.offsetWidth+'px';
  editbox.style.height=currentCell.offsetHeight+'px';
  editbox.style.fontSize=currentCell.style.fontSize;
  editbox.style.display='';
  if (!document.all){editbox.style.paddingTop='4px'};
  editbox.value=(currentCell.innerHTML!="&nbsp;")?currentCell.innerHTML:'';
  editbox.focus();
  editbox.value=editbox.value
  }
 
function editSelect(Obj1){
  editsel.style.width=currentCell.offsetWidth+'px';
  editsel.style.height=currentCell.offsetHeight+'px';
  var LesOptions=Obj1.getAttribute("ArrayOpt").split(';');
  while(editsel.options.length>1){editsel.removeChild(editsel.options[editsel.options.length-1])}
  var cellMid=Math.round(currentCell.offsetHeight/2,0);
  editsel.style.top=currentCell.offsetTop+cellMid-10+'px';
  editsel.style.left=currentCell.offsetLeft+'px';
  editsel.style.fontSize=currentCell.style.fontSize;
  editsel.style.visibility="visible";
 
  for(i=0;LesOptions[i];i++){
      var newOpt=document.createElement('option');
      newOpt.value=LesOptions[i];
      newOpt.innerHTML=LesOptions[i];
      if(newOpt.innerHTML==currentCell.innerHTML){newOpt.selected='selected';}
      editsel.appendChild(newOpt);
      }
   editsel.focus();   
  }  
 
function copyValue(Box){
 
TransValue="";
switch(Box.id){
  case "saisie" :   TransValue=(Box.value.length>0)?Box.value:"&nbsp;";
						Box.value=""
						Box.style.display='none';
						break;
  case "MySel":     TransValue=(Box.options.selectedIndex==-1)?"&nbsp;":Box.options[Box.selectedIndex].value;
						Box.style.top=0;
						Box.style.left=0;
						Box.style.visibility='hidden';	
						break;
						}
currentCell.innerHTML=TransValue;
}
 
 
function Myinit(){
    var TabTr=document.getElementsByTagName('tr');
 
    for(i=0;TabTr[i];i++){
          var TabTd=TabTr[i].getElementsByTagName('td');
	       for(j=0;TabTd[j];j++){ 
	       				TabTd[j].id="Cell"+i+"_"+j;
	       				if(j==3){TabTd[j].ondblclick=function(){currentCell=this;
	       															editSelect(this)};
	       				                                      }
	       				else{TabTd[j].ondblclick=function(){edit(this)}}
				          }
   }
editsel=document.getElementById('MySel');				          
 }     
window.onResize=function(){alert('coucou');}
 </script>    
 
</head>
 
<body onload="Myinit()" >
<table >
	<tr>
			<td>bonjour</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td ArrayOpt="S;E;L">&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
	</tr>	
	<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td ArrayOpt="Bonjour;Aurevoir;coucou; salut">&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
	</tr>				
	<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td ArrayOpt="Banane;Oranges;Kiwi;fraises">&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
	</tr>				
	<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td ArrayOpt="chocolat;vanille;menthe;café;grenadine">&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
	</tr>				
	<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td ArrayOpt="rouge;vert;bleu;noir;jaune;marron;taupe;violet;blanc;saumon">&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
	</tr>				
	<tr>
			<td></td>
			<td></td>
			<td></td>
			<td ArrayOpt="Bonjour;Aurevoir;coucou; salut"></td>
			<td></td>
			<td></td>
	</tr>		
</table>
 
<input type='text'	style='position:absolute;display:none;top:0;left:0;width:150px;' id='saisie' onblur="copyValue(this)" value=''/>
<select id="MySel" name="hello" style='position:absolute;visibility:hidden;top:0;left:0;width:150px;' onblur="copyValue(this)" >
<option value="&nbsp;">-selectionnez</option>
</select>			
</body>
</html>

La cellule passe en mode éditable au doubleclick...

**Darkaurora** · 10/10/2013, 12h56

Pour te répondre MisterPur j'ai créé une interface pour la saisie de devis. Cependant un point me dérange je dois laisser la possibilité à mes commerciaux de saisir du texte libre sans que ce soit des références et des désignations sortis de ma base article. Or jusque ici la seule gestion propre que j'ai faite c'est le blocage et le retour à la ligne automatique grâce à des props css

(max-width & word-wrap ) pour les cellules concernées (les cellules sont éditables je n'ai pas de champs). Le problème est que je souhaite leur en donner un peu plus: permettre un retour à la ligne or actuellement si je fais un retour à la ligne visuellement ce retour s'opère via des balises <br> mais lors de l'enregistrement dans ma BDD ces balises disparaissent et quand bien même pour le chemin inverse (la consultation d'un devis) les retours chariots ne sont pas interprétés dans mes cellules et tout se retrouve sur une même ligne

Merci pour ce code SpaceFrog je vais l'étudier.

**Lakhdr** · 16/10/2013, 22h40

Bonjour !
ajouter

Code :

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

 contenteditable="true

"
Exemple

Code html :

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

1
2
3
4
5
<table border="1" width="400" height="40">
<tr>
<td width="50%" contenteditable="true" ></td><td></td>
</tr>
</table>

D'une cellule à un champ texte

JavaScript

Discussions similaires

Partager

Partager