IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Mettre une liste déroulante dans un tableau


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2011
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2011
    Messages : 29
    Par défaut Mettre une liste déroulante dans un tableau
    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é ^^"

  2. #2
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    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...

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2011
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2011
    Messages : 29
    Par défaut
    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

  5. #5
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2011
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2011
    Messages : 29
    Par défaut
    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.

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    L'accès en édition au contenu d'une cellule se fait par double click sur la cellule.
    le select est en 4eme colonne
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2011
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2011
    Messages : 29
    Par défaut
    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 !!!

  8. #8
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comment mettre une liste déroulante dans la toolbar de Kepler ?
    Par fgthwood dans le forum Eclipse Platform
    Réponses: 0
    Dernier message: 03/02/2014, 16h51
  2. Réponses: 6
    Dernier message: 23/09/2008, 15h57
  3. Réponses: 2
    Dernier message: 15/02/2008, 14h48
  4. Faire apparaitre une liste déroulante dans un tableau
    Par AsQuel dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 05/07/2007, 17h20
  5. Réponses: 1
    Dernier message: 02/04/2007, 15h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo