Séparer entètes et tableau

malabarbe
Séparer entètes et tableau

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 lignes du tableau dépasse la hauteur
imposée par le div, en jouant avec l'ascensseur la ligne
d'entète disparait dans le haut de la liste, et par le
fait on ne vois plus le nom des colonnes et donc plus
de possibilité d'effectuer un tri.

Je vous propose mon source pour que vous puissiez me
dire si ce que je voudrais faire est possible et si oui, comment ?

Mon code :

<HTML>
<STYLE>
#trier { background-color:white; color:black; border-collapse:collapse; BORDER:white 1px solid; FONT:12 Arial; TEXT-ALIGN:center }
#trier TR { background-color:#ffefd5 }
#trier .title { background-color:#bf2b2f; FONT:14 Arial; color:#ffffff; font-weight:bold }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5 }
#trier TD { BORDER:white 1px solid; }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5;}
</STYLE>

<script>
var index
function sort_int(p1,p2) { return p1
-p2
; } //fonction pour trier les nombres function sort_char(p1,p2) { return ((p1
>=p2
)<<1)-1; } //fonction pour trier les strings function TableOrder(e,Dec) //Dec= 0:Croissant, 1:Décroissant { //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----// var FntSort = new Array() if(!e) e=window.event for(oCell=e.srcElement?e.srcElement:e.target;oCell.tagName!="TD";oCell=oCell.parentNode); //determine la cellule sélectionnée for(oTable=oCell.parentNode;oTable.tagName!="TABLE";oTable=oTable.parentNode); //determine l'objet table parent for(index=0;oTable.rows[0].cells
!=oCell;index++); //determine l'index de la cellule //---- Copier Tableau Html dans Table JavaScript ----// var Table = new Array() for(r=1;r<oTable.rows.length;r++) Table[r-1] = new Array() for(c=0;c<oTable.rows[0].cells.length;c++) //Sur toutes les cellules { var Type; objet=oTable.rows[1].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"") if(objet.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) { FntSort[c]=sort_char; Type=0; } //date jj/mm/aaaa else if(objet.match(/^[0-9£?$\.\s-]+$/)) { FntSort[c]=sort_int; Type=1; } //nombre, numéraire else { FntSort[c]=sort_char; Type=2; } //Chaine de caractère for(r=1;r<oTable.rows.length;r++) //De toutes les rangées { objet=oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"") switch(Type) { case 0: Table[r-1][c]=new Date(objet.substring(6),objet.substring(3,5),objet.substring(0,2)); break; //date jj/mm/aaaa case 1: Table[r-1][c]=parseFloat(objet.replace(/[^0-9.-]/g,'')); break; //nombre case 2: Table[r-1][c]=objet.toLowerCase(); break; //Chaine de caractère } Table[r-1][c+oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML } } //--- Tri Table ---// Table.sort(FntSort
); if(Dec) Table.reverse(); //---- Copier Table JavaScript dans Tableau Html ----// for(c=0;c<oTable.rows[0].cells.length;c++) //Sur toutes les cellules for(r=1;r<oTable.rows.length;r++) //De toutes les rangées oTable.rows[r].cells[c].innerHTML=Table[r-1][c+oTable.rows[0].cells.length]; } </script> <body> <p> </p> <p> </p> <center> <div align="center" style="height:100px; width:340px; overflow:auto; font-family: Times New Roman; font-size: 10px"> <table id=trier align="center"> <tr class=title> <td>Chevaux <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td> <td>Date <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td> <td>Age <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td> <td>Ind <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td> </tr> <tr><td style="text-align: left"><a id="aff2" class="tt2"> TORNADE DU DECLIC   </a></td><td> 20/03/2005 </td><td>4</td><td id=money>127.1 </td></tr> <tr><td style="text-align: left"><a id="aff3" class="tt2"> PITCHPIN DES BOIS</a></td><td> 22/02/2005 </td><td> 3</td><td id=money>127.8</td></tr> <tr><td style="text-align: left"><a id="aff4" class="tt2"> RENATE DES LANDES</a></td><td> 23/02/2005 </td><td>7</td><td id=money>128.2</td> </tr> <tr><td style="text-align: left"><a id="aff5" class="tt2"> MIGUEL DES VOLOS</a></td><td> 23/05/2005 </td><td>6</td><td id=money>129.6</td></tr> <tr><td style="text-align: left"><a id="aff6" class="tt2"> NIKY DU DONJON</a></td><td> 23/02/2006 </td><td>5</td><td id=money>131.3</td></tr> <tr><td style="text-align: left"><a id="aff6" class="tt2"> NIKY DU GOLF</a></td><td> 23/02/2005 </td><td>5</td><td id=money>128.6</td></tr> </table> </div> </body> </html>
fredericmazue
Re: Séparer entètes et tableau

pardonne moi si je dis une ânerie, je passe en coup de vent et j'ai survolé ta question.

mais il me semble que ta question contient la réponse :-) Séparer en-têtes et tableaux. Pourquoi ne pas mettre l'entête dans son propre div ? Ou mieux utiliser une balise thead ?