|
|
|
 |
| > Séparer entètes et tableau |
[ Posté par Malabarbe ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 19-02-2010 à 19:07 | 70 messages ]
|
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.
Voici 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 ointer }
#trier TD { BORDER:white 1px solid; }
BODY { background-color:#FFF5E5;}
</STYLE>
<SCRIPT>
var index
function sort_int(p1,p2) { return p1[index]-p2[index]; } //fonction pour trier les nombres
function sort_char(p1,p2) { return ((p1[index]>=p2[index])<<1)-1; } //fonction pour trier les strings
function TableOrder(e,Dec) //Dec= 0:Croissant, 1 é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[index]!=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[index]);
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>
<table id=trierrr 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>
</table>
<div align="center" style="height:100px; width:340px; overflow:auto; font-family: Times New Roman; font-size: 10px">
<table>
<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="aff3" class="tt2"> PITCHPIN DES
BOIS</a></td><td> 22/04/2005 </td><td> 3</td><td id=money>127.3</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>
|
|
Mais la, j'ai une erreur dans la partie javascript :
oCell=oCell.parentNode a la valeur null
Je ne m'en sort pas , si vous avez une idée !
|
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
