Javascript : trier lignes d'un tableau html

anonyme -  
 anonyme -
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   Statut Membre Dernière intervention   54
 
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
 
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   Statut Membre Dernière intervention   54
 
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
 
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

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
a javascript error occurred in the main process
Kytsu1241 -
lolomusic667 -

1 réponse