Mettre une liste déroulante dans un tableau

Version imprimable

Bonjour,
Dans le cadre de mon stage je dois faire un tableau en JavaScript et mettre une liste déroulante dans un champ.
Cela fait plusieurs jours que je suis dessus mais je n'arrive pas à faire ma liste déroulante dans le tableau. :calim2:
Est-ce que quelqu'un pourrait m'aider ?

Voici mon début de code Js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //Création du tableau function CreeTableau() { this.length = CreeTableau.arguments.length; for (var i = 0; i < this.length; i++) this[i+1] = CreeTableau.arguments[i]; } //Infos de la liste déroulante var LibelleOption = new CreeTableau("tata", "toto", "titi", "gros minet"); function liste(){ var a=document.getElementById('liste1'); select1=document.createElement('select'); select1.type="text"; select1.name='idselect1[]'; select1.id='idselect1'+maxId; }
J'appelle ensuite la fonction liste() dans un fichier php.
Merci d'avance et si le sujet existe déjà veuillez m'excuser je l'ai pas trouvé ^^"

bonjour,

Pour ajouter une liste déroulante dans ton tableau il n'y a pas de difficulté particulière :

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
 
<table border="1">
	<tr>
	<td>
		bla bla 
	</td>
	<td>
		<select>
		<option> option 1 </option>
		<option> option 2 </option>
		<option> option 3 </option>
		</select>
	</td>
	<td>
		bla bla 
	</td>	
	</tr>
	<tr>
	<td>
		bla bla 
	</td>
	<td>
		bla bla
	</td>
	<td>
		bla bla 
	</td>	
	</tr>	
</table>

je ne comprends pas très bien ton problème...

sinon un très vieux bout de code que je viens de déterrer

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

L'accès en édition au contenu d'une cellule se fait par double click sur la cellule.
le select est en 4eme colonne

22/12/2011, 15h10
lamb87

Bonjour,

En fait, on m'a demander de faire un tableau qui sera dupliqué avec du dom et ajax mais il serait construit en JavaScript, c'est à dire que le tableau n'est pas formé en html. Donc pour le tableau c'est bon mais une personne de l'entreprise m'a dit que pour la liste déroulante (qui sera affiché dans une case du tableau), on pouvais la faire entierement en js. Il m'a même montré que c'était possible. Malheureusement il est parti en vacance et je suis coincé :?

Si vous n'avez pas de solution ce n'est pas grave mais je serais dans l'obligation d'attendre et le code non terminé me traine dans la tête tout les jours 8O
Donc si vous avez ne serais ce que des pistes cela pourrais m'aider

Merci
22/12/2011, 15h27
lamb87

Merci SpaceFrog pour la réponse mais ce n'est pas vraiment ce que je cherche. De plus Eclipse semble ne pas connaitre l'attribut ArrayOpt et sur le navigateur il y a seulement un "bonjour" dans la première case et c'est tout.

Je vais reformuler mon problème car quand je le relis en fait c'est pas très clair 8O

Dans un formulaire, je coche une case qui me fait apparaitre une ligne contenant plusieurs input et une liste déroulante. Il y a de plus un bouton "ajouter" pour rajouter ces mêmes lignes. Pour se faire, je dois mettre la ligne sous forme de tableau pour la dupliquer.

Le problème est que l'on m'a imposé le javascript pour le faire :? Au pire des cas je le ferais sans en expliquant mon problème.
22/12/2011, 15h56
SpaceFrog

Citation:

L'accès en édition au contenu d'une cellule se fait par double click sur la cellule.
le select est en 4eme colonne
22/12/2011, 16h08
lamb87

Ah oui en effet .... vraiment désolé je me sens assez bête là :aie:

Et ben j'ai envie de te dire merci beaucoup !! :ccool:
C'est ce que je cherchais et çà fonctionne :mrgreen:

Merci d'avoir enlevé cette épine du pied ;)
Je met "résolu" pour mon plus grand plaisir !!!
22/12/2011, 16h09
Auteur

peut-être que ceci pourra t'éclairer :
http://www.developpez.net/forums/d33...ligne-tableau/

http://javascript.developpez.com/tut...ge=page_5#LV-B