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 :

Faire disparaitre la 1ere ligne d'un tableau


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Par défaut Faire disparaitre la 1ere ligne d'un tableau
    Bonjour

    Je dispose d'un tableau avec entete et des lignes de données. A coté de ce tableau, je dispose d'un bouton destiné a faire disparaitre la 1ère ligne de donnée a chaque fois qu'on clique dessus.

    Je m'explique : On clique 1 fois. La premiere ligne de donnée disparait et est remplacée par la deuxième. Lorsqu'on clique une 2ème fois, la 1ère ligne de donnée (anciennement 2ème ligne) disparait et fait place a la 2ème ligne de donnée (anciennement 3ème), etc etc ...

    le hic c'est que comme je débute en javascript, j'arrive a recupérer les lignes de données mais lorsque je clique sur le bouton, je n'arrive pas a faire en sorte que les lignes disparaissent unes a unes. Lorsque que je clique, elles partent toutes en meme temps.

    Voila mon souci. Merci a celui qui voudra bien me venir en aide parce que je suis legerement bloqué

  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,

    tu veux cacher (display: none) une ligne d'un tableau, ou la supprimer (deleteRow) ?

    Si c'est le second cas regarde cette discussion :
    http://www.developpez.net/forums/sho...d.php?t=334611
    dans cet exemple tu as des fonctions pour ajouter puis supprimer des lignes.

  3. #3
    Membre éclairé
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Par défaut
    Merci pour ta réponse mais je voudrais faire juste des display : none pour cacher les lignes.
    Je ne l'ai pas dit mais j'ai egalement un 2ème bouton qui fera réapparaitre les lignes qui ont disparu.

  4. #4
    Membre éclairé
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Par défaut
    je réitère ma question svp

  5. #5
    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
    Citation Envoyé par identifiant_bidon
    je réitère ma question svp
    montre nous plutôt ton code source

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    372
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2006
    Messages : 372
    Par défaut
    Juste une petite piste pour ton algo :
    - donne un id unique à chacune des lignes de ton tableau (genre line_0, line_1, line_2, ...)
    - lorque tu clique sur le bouton destiné à cacher la premiere ligne visible :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="button" onclic="taFonctionJs()">
    le javascript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function taFonctionJs(){
    var iter=0;
    var found;
    var elmt = document.getElementById("line_"+i);
    while (elmt !=null && found==0){
    if(elmt.style.display=='block'){
    elmt.style.display='none';
    found=1;
    }
    else{
    elmt = document.getElementById("line_"+i);
    }
    }
    }
    en gros tu parcours toutes tes lignes à chaque fois, et tu vérifie si leur style est en display:none ou pas, si c'est le cas tu passes à la suivante, et tu vérifie etc, et quand tu tombes sur celle qui est en display:block, BINGO!!! tu la passe en display:none et tu sors de la boucle!!!

    voilà!!!

  7. #7
    Membre éclairé
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Par défaut
    Ben pour l'instant c'est bien ce qui m'embete. J'ai pas grand chose. Comme j'ai dit, je m'y connais moyen en javascript

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    	function Panneau_vers_haut(){ // fonction appelée par le onClick
    			var i = 0;
    			var chaine = '';
    			
    			while (document.getElementById('table_courses').rows[i]) {
    // Avec cette boucle je passe en revue toutes les lignes du tableau
    				chaine = document.getElementById('table_courses').rows[i].innerHTML;
    //Ici je fais un test sur les lignes dont le style css n'est pas entete_table. Les lignes de données retournent bien -1
    				alert(chaine.indexOf('entete_table',0));
    			i++;
    			}
    	}
    Mon souci est plus d'ordre sequentiel. Je n'arrive pas a faire en sorte qu'a chaque fois qu'on clique sur le bouton, une seule ligne (-1) disparait. Au lieu de ca, elles disparaissent toutes.

  8. #8
    Membre éclairé
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Par défaut
    Ok anneB. Merci pour ta reponse. Je vais explorer ca

  9. #9
    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
    petite précision :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    if(elmt.style.display=='block')
    les lignes de tableau ne sont pas de style block.

    ce qui m'embête dans le code de Anne c'est que la variable found n'est pas initialisée avant la boucle, i n'est pas déclarée et iter n'est pas utilisée.

  10. #10
    Membre éclairé
    Profil pro
    Inscrit en
    Juillet 2006
    Messages
    372
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2006
    Messages : 372
    Par défaut
    dsl, j'ai tapé un truc vraiment vite fait, c'était pour donner une idée d'algo....
    La fonctuion corrigée :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function taFonctionJs(){ 
    var i=0; var found=0; 
    var elmt = document.getElementById("line_"+i); 
    while (elmt !=null && found==0){ 
    if(elmt.style.display=='block'){ 
    elmt.style.display='none'; found=1; 
    } 
    else { 
    i++;
    elmt = document.getElementById("line_"+i); 
    } 
    } 
    }
    Pour le truc du style display none, bah c'est la class de la balise "tr" du tableau qu'il faut mettre en style display none...

    Mais bon, la je le répète c'est juste une idée d'algorythme....les gens sont tout à fait capables d'adapter et réfléchir il me semble

  11. #11
    Membre éclairé
    Inscrit en
    Juillet 2006
    Messages
    747
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 747
    Par défaut
    J'ai réussi a faire ce que je voulais. Je vous remercie très sincèrement pour votre aide.

    Voici le code utilisé, pour ceux qui aurait un problème similaire, il fonctionne a merveille :

    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
     
    	function Panneau_vers_haut(){ 
    		var i = 1; 
    		var found = 0; 
     
    		while (document.getElementById('table_courses').rows[i] && found == 0){ 
    				if(document.getElementById('table_courses').rows[i].style.display != 'none')
    				{ 				
    					document.getElementById('table_courses').rows[i].style.display = 'none'; 
    					found = 1; 
    					} 
    				else 
    				{ 
    				i++; 
    				} 
    		}			
    	}

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

Discussions similaires

  1. Réponses: 3
    Dernier message: 07/05/2014, 18h38
  2. [Vxi3] faire disparaitre l'entête d'un tableau vide dans une section
    Par tpeluchon dans le forum Deski
    Réponses: 3
    Dernier message: 31/05/2010, 11h47
  3. Réponses: 1
    Dernier message: 17/04/2007, 17h42
  4. Faire disparaitre l'effet 3D d'un tableau
    Par mamiberkof dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 26/02/2007, 15h54
  5. faire disparaitre les contours d'une cellule de tableau
    Par moonia dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 06/04/2006, 12h27

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