Sujet Précédent Sujet Suivant

Javascript : trier lignes d'un tableau html

Fermé
anonyme - 26 janv. 2010 à 14:29
 anonyme - 26 janv. 2010 à 19:02
Bonjour,

Je souhaite trier les lignes d'un tableau html à partir de la sélection dans un formulaire du type 'select'.
J'ai écrit qq chose en javascript mais c'est la première fois que je code de la sorte et il ne se passe rien : pas de tri!
Est-ce que qqn pourrait au moins me donner une piste?

Voici mon code :
<HEAD>
<script language="Javascript" type="text/Javascript">
<!--
//
// FONCTION POUR LA SELECTION DES LIGNES PAR DOMAINES
function tri_domaines()
{
/** On récupère l'élément HTML <select>*/
var selectEl = document.getElementById('IdentifiantDeMonSelect');
/** Récupération de la valeur du select*/
var selectValue = selectEl.options[selectEl.selectedIndex].value;
/** Récupération du tableau*/
var tableau = document.getElementById('quid');
/** On parcourt les lignes du tableau (à partir de la troisième ligne)*/
for (i=0; i<tableau.rows.length-2; i++)
{
/** Test valeur de la cellule Domaines / valeur sélectionnée*/
if (tableau.rows[i+2].cell[1].innerText==selectValue)
{
if (tableau.rows[i+2].style.display=='none')
{
tableau.rows[i+2].style.display='inline';
}
}
else
{
if (tableau.rows[i+2].style.display=='inline')
{
tableau.rows[i+2].style.display='none';
}
}
}
}
//-->
</script>
</HEAD>
<TABLE id="quid" border=1 cellSpacing=2 cellPadding=2 width="100%" height=117>
<TBODY>
<TR style="display:inline" align=middle>
<TD bgColor=red vAlign=center colSpan=2><FONT color=black><B>Quoi?</B></FONT></TD>
<TD bgColor=blue vAlign=center colSpan=2><FONT color=black><B>Quand?</B></FONT></TD>
<TD bgColor=green vAlign=center colSpan=2><FONT color=black><B>D'où?</B></FONT></TD>
<TD bgColor=yellow vAlign=center><FONT color=black><B>Pourquoi?</B></FONT></TD>
<TD bgColor=orange vAlign=center><FONT color=black><B>Comment?</B></FONT></TD>
<TD bgColor=pink vAlign=center><FONT color=black><B>Et après?</B></FONT></TD>
</TR>
<TR style="display:inline">
<TD bgColor=red vAlign=center><FONT color=black>Questions</FONT></TD>
<TD bgColor=red vAlign=center><FONT color=black>Domaines <SELECT id="IdentifiantDeMonSelect" name="Domaines" <a href='#' onclick='tri_domaines()'></a>>
<OPTION VALUE="A">A</OPTION>
<OPTION VALUE="B">B</OPTION>
<OPTION VALUE="C">C</OPTION>
<OPTION VALUE="D">D</OPTION>
<OPTION VALUE="E">E</OPTION>
</SELECT>
</FONT></TD>
<TD bgColor=blue vAlign=center><FONT color=black>Date1</FONT></TD>
<TD bgColor=blue vAlign=center><FONT color=black>Date2</FONT></TD>
<TD bgColor=green vAlign=center><FONT color=black>Org</FONT></TD>
<TD bgColor=green vAlign=center><FONT color=black>Serv</FONT></TD>
<TD bgColor=yellow vAlign=center><FONT color=black>Besoin</FONT></TD>
<TD bgColor=orange vAlign=center><FONT color=black>Sol</FONT></TD>
<TD bgColor=pink vAlign=center><FONT color=black>Suite</FONT></TD>
</TR>
<TR style="display:inline">
<TD bgColor=white vAlign=center><FONT color=black><B>question1?</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black><B>D</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>X</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Y</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Résumé1</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Sol1</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>SO</FONT></TD>
</TR>
</TR>
<TR style="display:inline">
<TD bgColor=white vAlign=center><FONT color=black><B>question2?</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black><B>E</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>X2</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Y2</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Résumé2</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Sol2</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>SO</FONT></TD>
</TR>
</TR>
<TR style="display:inline">
<TD bgColor=white vAlign=center><FONT color=black><B>question3?</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black><B>C</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>X3</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Y3</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Résumé3</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Sol3</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>SO</FONT></TD>
</TR>
</TR>
<TR style="display:inline">
<TD bgColor=white vAlign=center><FONT color=black><B>question4?</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black><B>B</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>X4</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Y4</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Résumé4</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Sol4</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>SO</FONT></TD>
</TR>
</TR>
<TR style="display:inline">
<TD bgColor=white vAlign=center><FONT color=black><B>question5?</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black><B>A</B></FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>10</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>X5</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Y5</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Résumé5</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>Sol5</FONT></TD>
<TD bgColor=white vAlign=center><FONT color=black>SO</FONT></TD>
</TR>
<TBODY></TBODY></TABLE>

Merci par avance...

2 réponses

Réponse 1 / 2
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
26 janv. 2010 à 14:31
Bonjour,

tu récupères tes données d'une base de données ? Si c'est le cas tu peux les classer dans ta requête de récupération : 

ORDER BY mon_champs


à la fin de ta requête.
0
anonyme
26 janv. 2010 à 14:47
Non je n'utilise pas de BDD, donc pas de requête...
0
Réponse 2 / 2
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
26 janv. 2010 à 16:33
J'ai trouvé cette article qui propose une librairie qui fait ca pour toi. Tout est expliqué dans l'article :

https://www.paperblog.fr/1008181/trier-vos-tableaux-avec-javascript/

En espérant que ça t'aide ^^
0
anonyme
26 janv. 2010 à 19:02
Merci pour le blog,

Malheureusement ça ne m'aide pas vraiment.
En fait l'article parle des classes existantes javascript qui permettent de trier les colonnes (en fait de les réorganiser).
Or ce que je veux, c'est dans une colonne (disons la colonne C), on a une ligne en entête qui contient un formulaire de type select (avec les choix 1, 2, 3...). Lorsque l'utilisateur clique sur un des choix de la liste déroulant (par exemple 2) alors je veux que seules les lignes dont la colonne C contient 2 apparaissent.
En fait c'est plutôt comme un filtre excel...

Dans mon script, je récupère la valeur du select et je la compare aux valeurs des cellules de toutes les lignes de la colonne incriminée. S'il y a égalité, ce soit être visible, sinon c'est caché (en fait je passe par les style.display...).

Le problème reste donc ouvert...
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
afficher un tableau JS en HTML
jibouz12 -
jibouz12 -

3 réponses
Nodejs.exe est-ce un virus
Maverik1956 -
Malekal_morte- -

13 réponses
[Javascript] Tables de Multiplication
pigeonus -
hachim -

6 réponses