Forum : Afficher/Cacher contenu généré en javascript.

Bonjour,

Alors voilà, je rencontre un assez gros problème qui me bloque totalement.

Je souhaites masquer/afficher avec un petit bouton un tableau qui est généré par des fonctions javascripts.

Voici l'appel des fonctions dans ma page .php

$(document).ready(function () {
                                                DATA_TIMELINE.initProject('<?php echo $projectName ?>', 'Backlog');
                                                UI_TIMELINE.init();
                                                PREFERENCES_TIMELINE.init();
                                                UI_TIMELINE.display();
                                            });

Celà appel plusieurs fonctions me permettant d'afficher mon tableau et son contenu.

Je souhaiterai pouvoir cacher ce tableau ou l'afficher.

C'est très facile sur du contenu généré en php ou en html mais en javascript je n'ai trouvé aucune aide sur internet..

Je bien essayé comme ça mais je n'avais pas beaucoup d'espoir :

<div id="accordion" class="panel-group">     
        <div class="panel panel-default">     
            <div id="headingOne" class="panel-heading">
                <h4 class="panel-title">
                    <a type="button" class="btn btn-default glyphicon glyphicon-plus" href="#collapseOne" data-toggle="collapse" data-parent="#accordion"> </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in"> 
                <div class="panel-body"><script>$(document).ready(function () {
                                                DATA_TIMELINE.initProject('<?php echo $projectName ?>', 'Backlog');
                                                UI_TIMELINE.init();
                                                PREFERENCES_TIMELINE.init();
                                                UI_TIMELINE.display();
                                            });
                                      </script>
                </div> 
            </div>
        </div>
    </div>

Si vous avez des idées pour m'aider, elles seraient les bien venues ! Merci :)

Nicolas Delage

Auteur

Je me demandais, étant donné que je me sers de tablesorter dans ma fonction UI_TIMELINE si une fonctionnalité de trablesorter pouvait gérer celà.. Je cherche de ce côté actuellement..

saibe

hello, regarde là, si ça peut t'aider...

lGatl

Tu peux preciser les attributs d'un createEelement comme par exemple lui donner une class qui s'appelerait "cache"

 var tableau = document.createElement("table");
   tableau.setAttribute(class, "cache");

et l'inserer dans ton DOM

     body.appendChild(tableau);

utiliser le css pour le cacher

.cache{
   display:none;
}

ou le montrer
en lui retirant la class cache aprés l'avoir selectionné, par exemple

tontableau = getElementsByClassName('cache')[0]
tontableau.classList.remove('cache')

Tu peux aussi sans utiliser le css sans lui donner de class, l'inserer quand tu veux qu'on le voit.

     body.appendChild(tableau);

Et le supprimer quand tu ne souhaites plus qu'on le voit avec "element.removeChild( );" mais la tu vas devoir un peu manipuler le DOM avec des trucs du genre "first.child()" pour reussir à supprimer le bon element

lGatl

Pour eviter d'avoir à manipuler le Dom, tu peux creer une div vide avec par exemple un id pour la selectionner facilement qui serait destinée à contenir ton tableau. Et hop => tadiv.removeChild(tadiv.firstChild).

Afficher/Cacher contenu généré en javascript.

4 réponses