Tri de tableau html

Commenter

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

S'inscrire maintenant

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.

Du même auteur (francktfr)