Affichage d'un tableau

tagadax Messages postés 97 Date d'inscription mercredi 24 septembre 2008 Statut Membre Dernière intervention 27 mars 2010 - 4 janv. 2010 à 09:38
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 15 janv. 2010 à 17:33
Bonjour voila j'ai un problème j'ai une fonction en Javascript qui permet d'afficher un tableau selon un choix effectué dans un select
<script type="text/javascript">
function decision(){
var allElements = document.getElementById('affichtab').getElementsByTagName('table');
for (var i = 0; i<= allElements.length;i++) {
if(allElements[i].style.display=='block'){
allElements[i].style.display=='none'
}
}
if(document.getElementById('monselect').value=='Salle de réunion n°1 - RDC'){
document.getElementById('tableau1').style.display='block'
}
if(document.getElementById('monselect').value=='Salle de réunion n°2 - RDC'){
document.getElementById('tableau2').style.display='block'
}
if(document.getElementById('monselect').value=='Salle de réunion à Boston - RDC'){
document.getElementById('tableau3').style.display='block'
}
if(document.getElementById('monselect').value=='Salle de réunion à Mexico - RDC'){
document.getElementById('tableau4').style.display='block'
} 					   if(document.getElementById('monselect').value=='Salle de réunion à Ottawa - RDC'){
document.getElementById('tableau5').style.display='block'
}       
if(document.getElementById('monselect').value=='Salle de réunion à Quito - RDC'){
document.getElementById('tableau6').style.display='block'
}                        
if(document.getElementById('monselect').value=='Salle de réunion à Londres - 1er étage'){
document.getElementById('tableau7').style.display='block'
}                      
if(document.getElementById('monselect').value=='Salle de réunion à Paris - 1er étage'){
document.getElementById('tableau8').style.display='block'
}                        
if(document.getElementById('monselect').value=='Salle de réunion à Prague - 1er étage'){
document.getElementById('tableau9').style.display='block'
}                        
if(document.getElementById('monselect').value=='Salle de réunion à Rome - RDC'){
document.getElementById('tableau10').style.display='block'
}
}				
</script>

Ma question est, ou dois-je construire mes tableaux?exemple:('tableau1')
 document.getElementById('tableau1').style.display='block'


Au début je voulais le faire en css, mais je n'ai pas trouver comment faire, donc je me suis lancée dans le javascript(je n'y connais donc pas grand chose =/)
Merci de votre aide.
Bisou

8 réponses

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
12 janv. 2010 à 20:46
bonjour

le div tu le met ou tu veut

voici un exemple complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function decision(){
var allElements = document.getElementById('affichtab').getElementsByTagName('table');

for (var i = 0; i< allElements.length;i++){

if(allElements[i].style.display=='block'){
allElements[i].style.display='none';
}
}
if(document.getElementById('monselect').value=='Salle de réunion n°1 - RDC'){
document.getElementById('tableau1').style.display='block'
}
if(document.getElementById('monselect').value=='Salle de réunion n°2 - RDC'){
document.getElementById('tableau2').style.display='block'
}
if(document.getElementById('monselect').value=='Salle de réunion à Boston - RDC'){
document.getElementById('tableau3').style.display='block'
}

}				
</script>
</head> 

<select id="monselect" onchange="decision()">
  <option value="Salle de réunion n°1 - RDC">Choix 1</option>
  <option value="Salle de réunion n°2 - RDC">Choix 2</option>
  <option value="Salle de réunion à Boston - RDC">Choix 3</option>
</select>


ghjghjk,
----
jkgjhk, </td>
----
kghjhk


hhhhhhhh,
----
hhhhhhh, </td>
----
hhhhhhhh


kkkkkkk,
----
kkkkkkk, </td>
----
kkkkkk



 
</html>



au demarage tous le tableau un style display none il son donc tous cache
0
tagadax Messages postés 97 Date d'inscription mercredi 24 septembre 2008 Statut Membre Dernière intervention 27 mars 2010
14 janv. 2010 à 10:29
Bonjour désoler du temps que j'ai mis pour répondre, mais j'ai une question, se que tu a postés, si a display je met none tous les tableaux apparaitront ou il faut mettre block? parce que je vois que aux 2 premiers tu a mis none puis aux troisiéme block.Donc que dois-je faire?
0
tagadax Messages postés 97 Date d'inscription mercredi 24 septembre 2008 Statut Membre Dernière intervention 27 mars 2010
14 janv. 2010 à 10:44
J'ai donc tester ta fonction et elle ne marche pas, quand je choisi une option dans mon select, rien ne s'affiche, mais display sont tous en mode block, quand je l'ai met tous en mode none, il sont tous afficher alors que je n'ai choisi aucune option dans mon select.Es ce normale?
Bisou bonne journée
0
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
14 janv. 2010 à 13:19
je vient d'essayer le script sur firefox et IE et sa marche ?

dans l'exemple un des tableaux est en block ce qui fait qu'il est affiche au chargement de la page on peut tous les mettres en none sa aurait pour effet qu'aucuns des tableaux n'est afficher au chargement.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
tagadax Messages postés 97 Date d'inscription mercredi 24 septembre 2008 Statut Membre Dernière intervention 27 mars 2010
14 janv. 2010 à 14:03
Oui j'ai vu que les tableaux s'affichaient au chargement de la page quand le display est en mode block, mais ils s'affichent tous, alors que je n'ai fais aucun choix dans mon select.que dois-je faire pour qu'ils s'affichent que quand je choisi mon option dans le select?
0
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
14 janv. 2010 à 18:50
le display doit etre en mode none

<table id='tableau2'border=2 style='height:100px;width:100px;background-color:#232444;display:none'>
0
tagadax Messages postés 97 Date d'inscription mercredi 24 septembre 2008 Statut Membre Dernière intervention 27 mars 2010
15 janv. 2010 à 10:00
Oui mais quand je met en mode none, et que je fais mon choix dans mon select, rien ne s'affiche =/
0
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
15 janv. 2010 à 17:33
mais l'exemple luis il marche je vient de refaire le teste en recopiant l'exemple avec firefox et ie et c'est ok

il peut y avoir des erreurs de syntaxe quand j'ai repris le code pour faire l'exemple il y en avait des petites erreurs

si tu utilise firefox vas dans outils console d'erreur et il te dira ou se trouve les erreurs dans le code
0
Rejoignez-nous