Tri de tableaux html

Soyez le premier à donner votre avis sur cette source.

Vue 23 970 fois - Téléchargée 1 204 fois

Description

Ce code permet d'ajouter un tri automatique sur un tableau classique, le javascript fait tout à partir d'un tableau simple.

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
	<!--
		function compstr(a, b){
			return a<b;
		}
		function comp(a, b){
			return (a.match(/[0-9]/g))?((a*1>b*1)?true:false):((compstr(a, b))?true:false);
		}
		function sortH(id, arrayindex){
			//trie les lignes d'un tableau
			var tab=document.getElementById(id);
			var a=tab.childNodes[1];
			var i=0, j, k, l, m;
			l=a.childNodes.length;
			for (i=1;i<l-1;i++){
				for (j=i+1;j<l;j++){
					if (a.childNodes[j].cells){
						if (comp(a.childNodes[j].cells[arrayindex].innerHTML, a.childNodes[i].cells[arrayindex].innerHTML)){
							for (k=0;k<a.childNodes[j].cells.length;k++){
								m=a.childNodes[i].cells[k].innerHTML;
								a.childNodes[i].cells[k].innerHTML=a.childNodes[j].cells[k].innerHTML;
								a.childNodes[j].cells[k].innerHTML=m;
							}
						}
					}
				}
			}
		}

		function sortV(id, arrayindex){
			//trie les colones d'un tableau
			var tab=document.getElementById(id);
			var a=tab.childNodes[1];
			var i=0, j, k, l, m;
			l=a.childNodes[arrayindex].cells.length;
			for (i=1;i<l-1;i++){
				for (j=i+1;j<l;j++){
					if (a.childNodes[j].cells){
						if (comp(a.childNodes[arrayindex].cells[j].innerHTML,a.childNodes[arrayindex].cells[i].innerHTML)){
							for (k=0;k<a.childNodes[arrayindex].cells.length;k++){
								m=a.childNodes[k].cells[i].innerHTML;
								a.childNodes[k].cells[i].innerHTML=a.childNodes[k].cells[j].innerHTML;
								a.childNodes[k].cells[j].innerHTML=m;
							}
						}
					}
				}
			}
		}

	-->
</script>
</head>
<body>
<h1>Fonction générique de tris de tableaux html</h1>
<h2>Ex : classement d'échecs dans un club</h2>
<table class="tableau" id="tableau">
	<tbody><tr>
		<th onclick="sortH('tableau', 0)">Concurents</th>
		<th onclick="sortH('tableau', 1)">partie rapide</th>
		<th onclick="sortH('tableau', 2)">partie longue</th>
		<th onclick="sortH('tableau', 3)">nombre de victoires dans l'année</th>
		<th onclick="sortH('tableau', 4)">nombre de défaites dans l'année</th>
	</tr><tr>
		<td onclick="sortV('tableau', 1)">Micheline</td>
		<td>2412</td>
		<td>1956</td>
		<td>16</td>
		<td>2</td>
	</tr><tr>
		<td onclick="sortV('tableau', 2)">Jaqueline</td>
		<td>1199</td>
		<td>1199</td>
		<td>3</td>
		<td>12</td>
	</tr><tr>
		<td onclick="sortV('tableau', 3)">Géraldine</td>
		<td>1256</td>
		<td>1363</td>
		<td>5</td>
		<td>8</td>
	</tr><tr>
		<td onclick="sortV('tableau', 4)">Bertran</td>
		<td>1567</td>
		<td>1612</td>
		<td>8</td>
		<td>7</td>
	</tr>
</tbody>
</table>
<p>Ce fichier contient un exemple (pas forcément compliqué, de niveau disons intermédiaire), de tri de tableau html : on a un tableau html, on le relie à du javascript par un id, et des onclick qui indiquent le tableau qui doit être trié, et la référence de tri...</p>
</body>
</html>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
jeudi 2 novembre 2000
Statut
Membre
Dernière intervention
5 octobre 2009

Vous pouvez utiliser le tablesorter et jQuery http://tablesorter.com/docs/
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour à tous...
pour une compatibilité il faut rester trivial à savoir utiliser la propriété rows des tables qui elle retourne un OBJET, on peut donc faire
//----------------------------
function sortH(id, arrayindex){
//trie les lignes d'un tableau
var tab=document.getElementById(id);
var a = tab;
var i =0, j, k, l, m;
l= tab.rows.length;
for (i=1;i<l-1;i++){
for (j=i+1;j<l;j++){
if (a.rows[j].cells){
if (comp(a.rows[j].cells[arrayindex].innerHTML, a.rows[i].cells[arrayindex].innerHTML)){
for (k=0;k et cela marchera...
Messages postés
9
Date d'inscription
mardi 31 mai 2005
Statut
Membre
Dernière intervention
19 novembre 2006

Aucune idée, je te le précise juste pour les gens qui chercheraient un code compatible ie/firefox
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
36
c'est la faute de IE, pas la mienne :) faut utiliser quoi sous IE ?
Messages postés
9
Date d'inscription
mardi 31 mai 2005
Statut
Membre
Dernière intervention
19 novembre 2006

Ne fonctionne pas sous IE : erreur à cause de childNodes
Afficher les 6 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.