11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Faire apparaitre une liste déroulante dans un tableau ?

Bonjour tout le monde,

Je voudrais créer un tableau de 9 * 24 dans lequel à l'intérieur de chaque case il y aurait une liste déroulante.
Mon problème est que je voudrais que cette liste déroulante n'apparaisse que au click sur la case du tableau.

Je ne suis vraiment pas doué en javascript mais j'ai essayé de faire cela :

<html>
<body>
<?php
echo '<table border="1">';
        for($i=0;$i<3;$i++){
            echo '<tr>';
            for($j=0;$j<3;$j++){
                echo '<td onClick="cacher(contenu_'.$i.'_'.$j.');"><div id="contenu_'.$i.'_'.$j.'">
                      <select name="voyant'.$i.'_'.$j.'">';
                           echo '<option>1</option>';
                           echo '<option>2</option>';
           }
           echo '</select></div></td>';
           echo '</tr>';
        }
        echo '</table>';?>
        </body>
        <script>
function afficher(obj){
        document.getElementById(obj).style.display = "block";
}

function cacher(obj){
        document.getElementById(obj).style.display = "none";
}

function init(){
    for(var i=0;i<3;i++){
        for(var j=0;j<3;j++){
            var id = 'contenu_'+i+'_'+j;
            document.getElementById(id).style.display = "none";    
        }
    }
}
</script>
</html>

Bon j'ai tout qui disparait, mais rien qui apparait lol

Bref comment faire ?
Merci de votre aide !!

PS : j'ai juste cette erreur la dans FF :
Avertissement : Élément référencé par son ID/NAME dans le contexte global. Utilisez la propriété standard du W3C « document.getElementById() » à la place.
Fichier source : http://192.168.1.3/Voyance/private/autres/test.php
Ligne : 1[/quote ]
et celle ci :

Erreur : document.getElementById(obj) has no properties
Fichier source : http://192.168.1.3/Voyance/private/autres/test.php
Ligne : 18


EDIT :
bon alors j'ai modifié comme ceci : 

echo '<td><div id="contenu_'.$i.'_'.$j.'" name="contenu" onclick="cacher(this);">




function afficher(obj){
        obj.style.visibility = "visible";
}

function cacher(obj){
        obj.style.visibility = "hidden";
}


et là j'arrive à faire disparaitre mes listes Smiley lol (ohh miracle)
j'ai donc essayé avec une petite fonction sur le onload de body : 

function init(){
    for(var i=0;i<3;i++){
        for(var j=0;j<3;j++){
            var id = 'contenu_'+i+'_'+j;
            document.getElementById(id).style.visibility = "hidden";    
        }
    }
}


tout cela marche bien mais maintenant quand je clique sur une case, il ne se passe plus rien !!
Modifié par asquel78 (05 Jul 2007 - 17:10)
bon allez j'ai trouvé tout seul je vous poste la réponse au cas ou :

<html>
<head>
 <script>
function test(obj){
    if(obj.style.visibility == "visible")
        obj.style.visibility = "hidden";
    else
        obj.style.visibility = "visible";
}

function affiche(obj){
        obj.style.visibility = "visible";
}

function init(){
    for(var i=0;i<3;i++){
        for(var j=0;j<3;j++){
            var id = 'contenu_'+i+'_'+j;
            document.getElementById(id).style.visibility = "hidden";    
        }
    }
}
</script>
</head>
<body onload="init();">
<?php
echo '<table border="1">';
        for($i=0;$i<3;$i++){
            echo '<tr>';
            for($j=0;$j<3;$j++){
                $test = 'contenu_'.$i.'_'.$j;
                echo '<td onclick="affiche('.$test.');"><div id="contenu_'.$i.'_'.$j.'" name="contenu_'.$i.'_'.$j.'">
                      <select name="voyant'.$i.'_'.$j.'">';
                           echo '<option>1</option>';
                           echo '<option>2</option>';
           }
           echo '</select></div></td>';
           echo '</tr>';
        }
        echo '</table>';?>
        </body>
       
</html>
Sujet clos
Aller à