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

Marsh Posté le 24-09-2005 à 13:47:41

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

Reply

Marsh Posté le 24-09-2005 à 13:47:41

Reply

Marsh Posté le 24-09-2005 à 13:51:04

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....

Reply

Marsh Posté le 24-09-2005 à 13:52:24

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

Reply

Marsh Posté le 26-09-2005 à 14:52:20

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

Reply

Marsh Posté le 26-09-2005 à 15:00:20

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

Reply

Marsh Posté le 26-09-2005 à 15:03:40

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

Reply

Marsh Posté le 27-09-2005 à 06:06:49

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

Reply

Marsh Posté le 27-09-2005 à 09:47:23

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.

Reply

Marsh Posté le 27-09-2005 à 16:11:46

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

Reply

Marsh Posté le 27-09-2005 à 16:12:29

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

Reply

Marsh Posté le 27-09-2005 à 16:12:29

Reply

Marsh Posté le 28-09-2005 à 21:05:47

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.

Reply

Marsh Posté le 28-09-2005 à 21:22:02

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.

Reply

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

Sujets relatifs:

Leave a Replay