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é

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.

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.

je réitère ma question svp

Citation:

---

Envoyé par identifiant_bidon

je réitère ma question svp

---

montre nous plutôt ton code source ;)

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:

---

<input type="button" onclic="taFonctionJs()">

---

le javascript :

Code:

---

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à!!!

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:

---

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.

Ok anneB. Merci pour ta reponse. Je vais explorer ca ;)

petite précision :

Code:

---

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.

dsl, j'ai tapé un truc vraiment vite fait, c'était pour donner une idée d'algo....
La fonctuion corrigée :

Code:

---

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 ;)

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:

---

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++; } } }

---