Tri de tableau html

Soyez le premier à donner votre avis sur cette source.

Snippet vu 13 627 fois - Téléchargée 26 fois

Contenu du snippet

Ce code permet de trier les tableaux HTML par colonne,
tres simple a mettre en place, les rangées doivent etre
identifiée pour faire partie des donées a trier.

Source / Exemple :


<HTML>
<HEAD>
<SCRIPT>
//	Code créé par francktfr pour www.systeme-d.net
function SortArray(aText,aHtml,Index,Order){
	var Test = Order > 0 ? "aText["+Index+"][b] > aText["+Index+"][a]" : "aText["+Index+"][b] < aText["+Index+"][a]" // Choix de la comparaison
	for (a = 0; a < aText[Index].length; a++)				//	Liste de tous les éléments du tableau
	{	
	       for (b = 0; b < aText[Index].length ;b++)		//	Re-liste tous les éléments pour les comparer à Numbers[a]
	       {
		    	if (eval(Test)) {
					for (i=0; i<aText.length; i++){			//	Mise a jour des tableaux
						Copy = aText[i][b]; aText[i][b] = aText[i][a]; aText[i][a] = Copy
						Copy = aHtml[i][b]; aHtml[i][b] = aHtml[i][a]; aHtml[i][a] = Copy
					}	
				} 
	       }
	}
}
function IsDate(sDate){	//	retourne true si c'est une date valide
	if (sDate.length < 8){return false}
    var iDay = sDate.substring(0,2)
    var iMonth = sDate.substring(3,5)
    var iYear = sDate.substring(6)
	iDay = iDay*1
	iMonth = (iMonth*1)-1
	iYear = iYear*1
	var rDate = new Date(iYear,iMonth,iDay,0,0)
	if(rDate.toString() == "NaN"){return false}
	return true
}
function cDate(sDate){	//	Convertie une date du format JJ/MM/AAAA en date JavaScript
    var iDay = sDate.substring(0,2)
    var iMonth = sDate.substring(3,5)
    var iYear = sDate.substring(6)
	iDay = iDay*1
	iMonth = (iMonth*1)-1
	iYear = iYear*1
	var rDate = new Date(iYear,iMonth,iDay,0,0)
	return(rDate)
}
function TableOrder(Dir){	//	1: Croissant, -1: Décroissant
	var oCell = event.srcElement
	while (oCell.tagName != "TD"){oCell = oCell.parentElement}	//	determine la cellule sélectionnée
	var oTable = oCell.parentElement
	while (oTable.tagName != "TABLE"){oTable = oTable.parentElement}	//	determine l'objet table parent
	var index = -1
	for (c=0; c<oTable.rows[0].cells.length; c++){if (oTable.rows[0].cells[c]==oCell){index=c}}	//	determine l'index de la cellule
	var RowNb = 0
	var aHtmlTable = new Array()					//	Tableau de contenu HTML
	var aTextTable = new Array()					//	Tableau de valeur
	for (c=0; c<oTable.rows[0].cells.length; c++){	//	sur toutes les cellules
		var ColonneHtml = new Array()
		var ColonneText = new Array()
		var RowNb = 0
		for (r=0; r<oTable.rows.length; r++){		//	de toutes les rangées nommées "TableDatas"
			if (oTable.rows[r].id == "TableDatas"){
				ColonneHtml[RowNb] = oTable.rows[r].cells[c].innerHTML	//	met a jour le tableau de colonne correspondant
				ColonneText[RowNb] = IsDate(oTable.rows[r].cells[c].innerText) ? cDate(oTable.rows[r].cells[c].innerText) : oTable.rows[r].cells[c].innerText
				RowNb++
			}
		}
		aHtmlTable[c] = ColonneHtml
		aTextTable[c] = ColonneText
		for (a=0; a<ColonneHtml.length; a++){aHtmlTable[c][a]=ColonneHtml[a]}
		for (a=0; a<ColonneText.length; a++){aTextTable[c][a]=ColonneText[a]}
	}
	RowNb=0
	SortArray(aTextTable,aHtmlTable,index,Dir)	//	Tri des données
	for (x=0; x<oTable.rows[0].cells.length; x++){	//	Remplacement des données dans le tableau HTML
		RowNb=0
		for (y=0; y<oTable.rows.length; y++){
			if (oTable.rows[y].id == "TableDatas"){
				oTable.rows[y].cells[x].innerHTML= aHtmlTable[x][RowNb] 
				RowNb++
			}
		}
	} 
}
</SCRIPT>
<STYLE>
.Table{font: 12 Arial; text-align: center; border: 1 solid black}
.Order{font: 12 Arial; cursor: hand; font-weight: bold; padding-left: 5; padding-right: 5}
</STYLE>
</HEAD>
<BODY>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 CLASS="Table">
    <TR BGCOLOR=#CCCCCC>
    	<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">&#9660;</SPAN>Date<SPAN CLASS="Order" onclick="TableOrder(1)">&#9650;</SPAN></TD>
    	<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">&#9660;</SPAN>Données 1<SPAN CLASS="Order" onclick="TableOrder(1)">&#9650;</SPAN></TD>
    	<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">&#9660;</SPAN>Données 2<SPAN CLASS="Order" onclick="TableOrder(1)">&#9650;</SPAN></TD>
    	<TD><SPAN CLASS="Order" onclick="TableOrder(-1)">&#9660;</SPAN>Données 3<SPAN CLASS="Order" onclick="TableOrder(1)">&#9650;</SPAN></TD>
    </TR>
    <TR BGCOLOR=#EEEEEE ID=TableDatas><TD>01/02/2003</TD><TD>2</TD><TD>3</TD><TD>Bidule</TD></TR>
    <TR BGCOLOR=#DDDDDD ID=TableDatas><TD>02/02/2003</TD><TD>1</TD><TD>2</TD><TD>Machin</TD></TR>
    <TR BGCOLOR=#EEEEEE ID=TableDatas><TD>03/01/2003</TD><TD>3</TD><TD>1</TD><TD>Truc</TD></TR>
    <TR BGCOLOR=#DDDDDD ID=TableDatas><TD>06/02/2003</TD><TD>5</TD><TD>1</TD><TD>Personne</TD></TR>
    <TR BGCOLOR=#EEEEEE ID=TableDatas><TD><FONT color=#FF0000>05/02/2003</FONT></TD><TD><FONT color=#FF0000>2</FONT></TD><TD><FONT color=#ff0000>4</FONT></TD><TD><FONT color=#FF0000>Autre</FONT></TD></TR>
    <TR BGCOLOR=#CCCCCC><TD>Total</TD><TD>13</TD><TD>11</TD><TD></TD></TR>
</TABLE>

</BODY>
</HTML>

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
samedi 20 janvier 2007
Statut
Membre
Dernière intervention
4 septembre 2007

Bonjour, bien que je ne sois pas informaticien et que je ne comprenne rien à tout ceci, il y a quand même un bug à signaler : le classement des caractères alphanumériques sous Firefox ne se fait pas correctement lorsqu'il s'agit de longues données, le seul moyen (après des tâtonnements)est de modifier la ligne "if (sDate.length < 8){return false}" en "if (sDate.length < 30){return false}" par exemple
Le même problème arrive pour ce script-ci : http://www.javascriptfr.com/code.aspx?ID=29116
Ma page : http://www.synergie-sante.net/html/annu/annuretr.html
Merci de vos explications
Messages postés
2
Date d'inscription
mardi 8 mars 2005
Statut
Membre
Dernière intervention
5 juin 2006

c tres bien ;)
Messages postés
1
Date d'inscription
vendredi 20 janvier 2006
Statut
Membre
Dernière intervention
21 février 2006

Enorme ta fonction, mais elle ne marche pas sous firefox !!! :(
Donc voila la version compatible pour ie et firefox(netscape)
Seul pb c pour la fonction innerText qui ne marche pas sous firefox, donc la dernier ligne du tableau en rouge ne marche pas. En gros il ne faut plus inserer de balise html dans le tableau.
Voila:

<html><HEAD>
<SCRIPT>
// Code créé par francktfr pour www.systeme-d.net
function SortArray(aText,aHtml,Index,Order){
var Test = Order > 0 ? "aText["+Index+"][b] > aText["+Index+"][a]" : "aText["+Index+"][b] < aText["+Index+"][a]" // Choix de la comparaison
for (a = 0; a < aText[Index].length; a++) // Liste de tous les éléments du tableau
{
for (b = 0; b < aText[Index].length ;b++) // Re-liste tous les éléments pour les comparer à Numbers[a]
{
if (eval(Test)) {
for (i=0; i
<STYLE>
.Table{font: 12 Arial; text-align: center; border: 1 solid black}
.Order{font: 12 Arial; cursor: hand; font-weight: bold; padding-left: 5; padding-right: 5}
</STYLE>
</HEAD>


▼Date▲,
▼Données 1▲,
▼Données 2▲,
▼Données 3▲,

----
01/02/2003, 2, 3, Bidule,
----
02/02/2003, 1, 2, Machin,
----
03/01/2003, 3, 1, Truc,
----
06/02/2003, 5, 1, Personne,
----
05/02/2003, 2, 4, Autre,
----
Total, 13, 11



</html>
Messages postés
2
Date d'inscription
mardi 26 avril 2005
Statut
Membre
Dernière intervention
28 avril 2005

Bonjour, j'aimerais savoir comment trier automatiquement une colonne dès l'ouverture de la page... merci!
Messages postés
101
Date d'inscription
vendredi 30 août 2002
Statut
Membre
Dernière intervention
5 novembre 2004

Dans la fonction "TableOrder" :
remplacer les " .tagName != " par " .tagName.toUpperCase() != "

ca devrait passer :)
Afficher les 12 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.