|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 TRI DE TABLEAUX HTML
 Information sur la source
 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
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
 Télécharger le zip
 Sources du même auteur
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 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 de tableau associatif [ par cydelic ]
Bonjour, J’ai un petit problème de tri... je vous explique Rien de bien compliquer, j’ai un tableau associatif du genre : var
liens dans une feuille de style [ par phelsuma ]
Salut tout le monde,Ce topic fait suite à celui-ci : http://www.javascriptfr.com/infomsg_INTEGRER-HT
Tri d'un tableau associatif [ par flexx ]
BonjourJe souhaite savoir s'il est possible d'effectuer un tri sur un tableau associatif.Par exemple, si j'ai le tableau suivant :tab["val2"] = "test1
Exporter un tableau html vers un fichier csv [ par aljazzar ]
Bonjour tt le monde,en effet je veux un script qui récupére les données dans un tableau html et qui génére ensuite un fichier csv ( « comma-separated
nom table html [ par milo2009 ]
Salut,Je créer des table dans une boucle php, cependant, je voudrais que chaque table es des nom different (table1, table2...).Puis appel une fonction
Actualiser page modale [ par JMKPROD ]
salut à tousJ'ouvre une page (php) modale avec "window.showModelessDialog", dans cette page j'affiche un tableau alimenté par une table (mysql), j'ef
|
 Téléchargements
Logiciels à télécharger sur le même thème :
|