menu select qui affiche/cache les lignes d'un tableau

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : menu select qui affiche/cache les lignes d'un tableau

snakeboudoir

Bonjour,

Je suis en train de réaliser un script PHP pour une messagerie interne.
Dans cette messagerie, je souhaiterai faire apparaitre un menu déroulant (type "select" ) avec le nom des expéditeurs ; lorsqu'on clique sur l'expediteur souhaité, tous les autres messages se cachent et il ne reste plus que ceux de l'expediteur demandé.

Bien sur, je souhaiterai le faire en JS mais j'ai un peu de mal avec ce langage

Voici le code :

Code :

function changeExp(expediteur) {
if (expediteur != "all" ) {
tabChecks = document.getElementsByName(expediteur);
for(i=0;i<tabChecks.length;i++) {
tabChecks[i].style.display="table-row";
}
}
<select id="choixExp" name="choixExp" onchange="changeExp(this.options[this.selectedIndex].value)">
<tr name="$id_membre" style="display:none">

Le problème c'est que je ne peux pas revenir en arrière : lorsque je clique sur un expediteur, ca affiche ses messages mais si je clique sur un autre, ça me laisse ceux d'avant (je sais pas si je suis très clair)

Merci de l'aide que vous pourriez m'apporter

---------------
http://www.mon-avis.fr

Publicité

xtof_83

Freeride Spirit

Oui on a compris...ben attend que Gatsusat passe par là..

Car j'ai une soluce, mais pas trés propre...
Ton code est un peu sale,
Tu vas te faire engueuler...

Enfin t'en fait pas tu(on) vas trouvé une solution simple,belle et clair....

snakeboudoir

lol je suis vraiment désolé

je suis pas très bon en JS donc j'ai du essayer plein de possibilités et au final je vous copie/colle une version dégueulasse

merci

---------------
http://www.mon-avis.fr

snakeboudoir

Je lui ai envoyé un MP...

D'ici là si jamais quelqu'un peut m'aider... là je patauge :s

---------------
http://www.mon-avis.fr

gatsusat

erf hey, je t'aiderai ce soir, limite si jvais po tout faire, en espérant que tu piges a ce que je ferai, en attendant, copie/colle le code HTML telle qu'il est actuellement dans ta page

snakeboudoir

Euh ouais... Là je suis en train d'essayer plein de possiilités alors ça doit surement etre encore pire :-D

Mais je veux bien :

Code :

<script type="text/javascript">
function changeExp(exp) {
if (exp.form.elements["choixExp"].options[exp.form.elements["choixExp"].selectedIndex].value != "all" ) {
tabTag = document.getElementsByTagName("tr" );
for(i=0;i<tabTag.length;i++) {
if ((tabTag[i].title == "exped" ) && (tabTag[i].name == exp.form.elements["choixExp"].options[exp.form.elements["choixExp"].selectedIndex].value)) {
tabTag[i].style.display="none";
}
}
} else {
}
}
</script>

Code :

<tr name="'.$id_membre.'"'.(($lu=='n') ? ' class="impair"' : '').' title="exped" style="display:table-row">

Voilà, bon bah merci beaucoup à toi alors :-)

---------------
http://www.mon-avis.fr

gatsusat

toi po avoir pigé que je voulais le HTML généré, mais c'est pas grave petit newbie, jvais te faire le truc :

Tout d'abord tu me vire ton putain d'attribut name et tu me fous un id="", et le style="display:table-row", c'est débile, puis TR ca veux déjà dire TableRow

donc on se retrouve avec un TR De ce genre
<tr id="Membre1" class="Impair">

et puis ensuite tu fais un script qui s'occupe de cacher tous les champs dont l'id ne correspond pas à celui sélectionné, et tu force l'affichage du membre sélectionné.

Tiens un petit script fait en 5 minutes

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script>
function ShowHideMembers(Select, MembersTableId) {
//On récupère le tableau
var Membres = document.getElementById(MembersTableId);
//On récupère le membre séléctionné
var SelectedMember = Select.value;
//On récupère toutes les lignes du tableau
var MesLignes = Membres.getElementsByTagName("TR" );
//On fouille toutes les lignes tu tableau, et on caches toutes celles qui ne correspondent pas
//au membre, et dans le cas contraire, on affiche celle qui correspond au membre sélectionné
//On part de 1 si on a une entête dans ce tableau, sinon on part de zéro
for (var i=0; i<=MesLignes.length-1; i++) {
if (MesLignes[i].id==SelectedMember)
MesLignes[i].style.display="block";
else MesLignes[i].style.display="none";
} //end for
}//end function
</script>
</head>
<body>
<form>
<select name="MembersChoice" id="MembersChoice" onchange="ShowHideMembers(this,'Membres')">
<option value="membre1">Membre 1</option>
<option value="membre2">Membre 2</option>
<option value="membre3">Membre 3</option>
</select>
</form>
<table id="Membres">
<tr id="membre1">
<td>m1 col1</td><td>col2</td><td>col3</td>
</tr>
<tr id="membre2">
<td>m2 col1</td><td>col2</td><td>col3</td>
</tr>
<tr id="membre3">
<td>m3 col1</td><td>col2</td><td>col3</td>
</tr>
</table>
</body>
</html>

Message édité par gatsusat le 27-09-2005 à 06:16:02

afbilou

pouet your life

Si tu as la possibilité de le faire en PHP (ou cote serveur) privilegie cette voie : juste une condition dans la clause where de ta requete SQL a rajouter pour n'afficher que les messages que tu souhaites.

snakeboudoir

Bon alors tout d'abord merci, puisque c'est ce qu'on dit lorsque quelqu'un nous aide.

Ensuite, c'est pas parce que tu crois t'y connaitre que tu es obligé de te la raconter... les "petit newbie" et "putain d'attribut name" étaient surement en trop puisque de toute évidence tu n'as meme pas lu correctement mon topic initial :
L'ATTRIBUT "ID" NE PEUT PAS AVOIR LA MEME VALEUR PUISQU'IL S'AGIT D'UN IDENTIFIANT DE MEMBRE QUI ENVOIE UN MESSAGE...
il y'a fort à parier pour qu'un membre envoie plusieurs messages et par conséquent, je me retrouve avec un attribut "ID" qui ne sera plus valide XHTML (je développe comme ça, et pas en transitionnel comme ton doctype l'indique dans ton code)

De plus, le display:table-row est nécessaire sous Firefox car il affiche les display:block sous forme... de blocs !! Ouais c'est étonnant mais "block" ça veut dire bloc... Le plus intéressant pour une compatibilité maximale étant de vérifier quel navigateur est utilisé...

Enfin bref, je te remercie quand même mais je te le répète, c'est pas parce que tu crois t'y connaître et tomber face à quelqu'un qui ne connait pas le JS que t'es obligé de péter plus haut que ton cul en plaçant des "petit newbie" totalement futiles...

---------------
http://www.mon-avis.fr

snakeboudoir

afbilou > oui je peux le faire en PHP, mais le truc c'est que je voudrais eviter le rechargement des pages... merci ;-)

---------------
http://www.mon-avis.fr

Publicité

Trounk

oula bah faut pas s'enerver comme .

bon moi je voulais juste poster pour te demande, snakeboudoir, de bien vouloir poster ton code qui fonctionne quand tu auras la solution finale, ca serait sympa ca.

gatsusat

ben dans ce cas tu te casse pas la tete tu rajoute un attribut sur chacun de tes TR

<tr membreId="membre1">

</tr>

et tu remplaces le MesLignes[i].id==SelectedMember
par un MesLignes[i].getAttribute("membreId" )==SelectedMember

et puis pour la validation, on s'en branle à ce nivo là, puisque sémantiquement parlant, ton code est correcte, tu ajoute juste un attribut non W3C, mais masklinn et FlorentG te diront comme moi, tu peux le faire, c'est du xHTML après tout comme du XML avec des attributs.

FORUM HardWare.fr

Programmation

HTML/CSS

menu select qui affiche/cache les lignes d'un tableau

Sujets relatifs
Navigation par menu déroulant avec frame	Marcro et Fusion d'un tableau Excel dans Word
pb de menu CSS	[SQL Server] Tester si un champ = 0 dans clause SELECT
Récuperer les infos d'une Liste/menu	Insérer une page dans un tableau précis.
[SQL] Petit problème avec clause SELECT	bordure d'une cellule d'un tableau
[html/css/javascript] menu clic gauche	image qui s'affiche sur firefox mais pas sur ie
Plus de sujets relatifs à : menu select qui affiche/cache les lignes d'un tableau

Page générée en 0.085 secondes