CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 11:41:00

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

TRI DE TABLEAUX HTML

Information sur la source

Note :
Aucune note

Catégorie :Navigation Classé sous :tri, table, tableau, html, sort Niveau :Initié Date de création :17/11/2006 Vu / téléchargé :20 854 / 1 073

Auteur : coucou747

Ecrire un message privé

Site perso

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (6)

Ajouter un commentaire et/ou une note

Description

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

Source

<!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>

<!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>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

tableaux_multisort.html 3 023 octets

Télécharger le zip

Sources du même auteur

NOTATION CLASSIQUE VERS NOTATION NPI

LIST.ML D'OCAML EN JAVASCRIPT

UN CHRONOMETRE EN SVG+JAVASCRIPT

WYSIWYG TOTALEMENT OO

DU DOM EN SVG : UNE HORLOGE ANALOGIQUE

Toutes les sources de coucou747

Sources de la même categorie

ANTI-ROBOTS V 1.0 par MacGaliver

PRÉSENTOIR PAGE/SUJET par tiranus

NAVIGATEUR INTERNET HAVRET par HAVRETos

WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator

NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT par zulrigh

Toutes les sources de la catégorie Navigation

Sources en rapport avec celle ci

MOOTABLEAU par Miky76

TABLEAU GÉNÉRÉ ET TRIÉ PAR LE CLIENT par Klephte

AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX par thebmxeur

TRI DE TABLEAU HTML, SCRIPT ORIENTÉ OBJET par zilx

TRI MULTI-COLONNES D'UN TABLEAU HTML par bultez

Commentaires et avis

Commentaire de Naixn le 18/11/2006 11:08:09

Avec javascript 1.7 (Firefox 2), tu peux remplacer :

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;

Par :
[a.childNodes[i].cells[k].innerHTML, a.childNodes[j].cells[k].innerHTML] = [a.childNodes[j].cells[k].innerHTML, a.childNodes[i].cells[k].innerHTML]

:p

Commentaire de vallica le 18/11/2006 13:53:01

Ne fonctionne pas sous IE : erreur à cause de childNodes

Commentaire de coucou747 le 18/11/2006 16:03:51 administrateur CS

c'est la faute de IE, pas la mienne :) faut utiliser quoi sous IE ?

Commentaire de vallica le 19/11/2006 14:43:47

Aucune idée, je te le précise juste pour les gens qui chercheraient un code compatible ie/firefox

Commentaire de PetoleTeam le 22/11/2006 18:49:11

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<a.rows[j].cells.length;k++){
            m=a.rows[i].cells[k].innerHTML;
            a.rows[i].cells[k].innerHTML=a.rows[j].cells[k].innerHTML;
            a.rows[j].cells[k].innerHTML=m;
          }
        }
      }
    }
  }
}

Nota :
  Sous IE le childNodes[0] retourne le TBODY si existe c'est pour cela que ça plante dans ton exemple, enléve les balise <TBODY> et cela marchera...

Commentaire de museq le 05/10/2009 04:42:51

Vous pouvez utiliser le tablesorter et jQuery http://tablesorter.com/docs/

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Tri (fonction sort) [ par John_Doe_88 ] Salut tlm,J'utilise la fonction sort pour trier un tableau, mais ce tableau peut être très grand et dans ce cas j'obtiens un message dans le navigateu Tri (fonction sort) [ par John_Doe_88 ] Salut tlm,J'utilise la fonction sort pour trier un tableau, mais ce tableau peut être très grand et dans ce cas j'obtiens un message dans le navigateu Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript) [ par edevouge ] Bonjour, Dans le cadre d'un stage, j'ai besoins de créer un tableau html à partir d'un fichier XML et d'un fichier XSL. Et grâce au JavaScript, je v Tri de colonnes d'un tableau html grâce à un js [ par ebenedzer ] SalutJe n'arrive pas à trouver comment je peux trier les colonnes d'un tableau fait en html, à l'aide d'un javascript.Est-ce que je dois met Tri à bulles d'un tableau HTML [ par Airman31 ] Tout d'abord bonjour à tous, J'ai besoin d'un petit coup de main pour une fonction Javascript que je suis en train d'implémenter : tri à bulle sur un Séparer entètes et tableau [ par bydouille ] Bonsoir à tous, J'ai fait un tri dynamique de tableau HTML avec le DOM Mon tableau s'affiche dans un div avec un overflow Quand le nombre de ligne HTML : changer image arriere plan tableau au passage souris [ par ju0123456789 ] Bonjour,Je voudrais savoir comment peut-on faire changer l'image d'arrière plan d'un tableau (page HTML) au passage de la souris n'importe où sur le tri de tableau multiple [ par PROTECTIONNISTE ] Bonjour,Je voudrais pouvoir classer via un élèment de tableau et ressortir ce tri convenablement. j'expliques car pour le moment ça veut rien dire ;-) Exporter un tableau contenu dans une page html vers un document text [ par chezeu ] J'ai un tableau contenu dans une page html. Je voudrais exporter ce tableau vers un document text à partir d'un bouton.N'y a t'il pas une fonction qui Suppression d'une ligne d'un tableau js [ par alaska749 ] Bonsoir, Après avoir souffert pour créer une simple table dynamique en javascript, je doit maintenant pouvoir supprimer n'aimporte quelle ligne de ce

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP