Mettre une liste déroulante dans un tableau [Résolu]

lamb87 · 22/12/2011, 09h33

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.

Est-ce que quelqu'un pourrait m'aider ?

Voici mon début de code Js :

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
 
//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é ^^"

Auteur · 22/12/2011, 15h01

bonjour,

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

Code html :

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

SpaceFrog · 22/12/2011, 15h07

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

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>

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

lamb87 · 22/12/2011, 15h10

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

Donc si vous avez ne serais ce que des pistes cela pourrais m'aider

Merci

lamb87 · 22/12/2011, 15h27

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

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.

SpaceFrog · 22/12/2011, 15h56

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

lamb87 · 22/12/2011, 16h08

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

Et ben j'ai envie de te dire merci beaucoup !!

C'est ce que je cherchais et çà fonctionne

Merci d'avoir enlevé cette épine du pied

Je met "résolu" pour mon plus grand plaisir !!!

Auteur · 22/12/2011, 16h09

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

22/12/2011, 15h10	#4
lamb87 Invité régulier Estéban Mougnaud Étudiant Inscription : décembre 2011 Messages : 29 Détails du profil Informations personnelles : Nom : Estéban Mougnaud Âge : 20 Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : décembre 2011 Messages : 29 Points : 9 Points : 9	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 Donc si vous avez ne serais ce que des pistes cela pourrais m'aider Merci
	00

22/12/2011, 15h27	#5
lamb87 Invité régulier Estéban Mougnaud Étudiant Inscription : décembre 2011 Messages : 29 Détails du profil Informations personnelles : Nom : Estéban Mougnaud Âge : 20 Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : décembre 2011 Messages : 29 Points : 9 Points : 9	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 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.
	00

22/12/2011, 16h08	#7
lamb87 Invité régulier Estéban Mougnaud Étudiant Inscription : décembre 2011 Messages : 29 Détails du profil Informations personnelles : Nom : Estéban Mougnaud Âge : 20 Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : décembre 2011 Messages : 29 Points : 9 Points : 9	Ah oui en effet .... vraiment désolé je me sens assez bête là Et ben j'ai envie de te dire merci beaucoup !! C'est ce que je cherchais et çà fonctionne Merci d'avoir enlevé cette épine du pied Je met "résolu" pour mon plus grand plaisir !!!
	00

22/12/2011, 16h09	#8
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 795 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 795 Points : 5 119 Points : 5 119	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email