Figer une ligne de tableau ??

Y a t-il moyen de figer une ligne de tableau pour que lorsqu'on défile la page grace a l'ascenseur cette ligne reste en haut de page, une sorte de recalculation des coordonnées de la ligne ligne je, sais pas un truc comme ca. Merci beaucoup de m'aider je suis grave dans la muise !!

Il y aurai plusieurs moyens à ton problème mais je n'en vois pas avec un tableau.

- le plus simple serait d'utiliser un frame en haut

- un peu plus dur serait d'utiliser les feuilles de style et de créer un calque dont les coordonnées sont recalculer en fonction de l'abaissement de l'ascenseur...je crois qu'il y a une source de ce genre quelque part sur le site

GrdScarabée : FLC - rézo's team


-------------------------------
Réponse au message :
-------------------------------

Y a t-il moyen de figer une ligne de tableau pour que lorsqu'on défile la page grace a l'ascenseur cette ligne reste en haut de page, une sorte de recalculation des coordonnées de la ligne ligne je, sais pas un truc comme ca. Merci beaucoup de m'aider je suis grave dans la muise !!

Tu as de la chance j'ai bossé la dessus il y a qques jours
########## Fichier sortabletable.js ########

/*----------------------------------------------------------------------------\
| Sortable Table 1.03 |
|-----------------------------------------------------------------------------|
| Created by Erik Arvidsson |
| (http://webfx.eae.net/contact.html#erik) |
| For WebFX (http://webfx.eae.net/) |
|-----------------------------------------------------------------------------|
| A DOM 1 based script that allows an ordinary HTML table to be sortable. |
|-----------------------------------------------------------------------------|
| Copyright (c) 1998 - 2002 Erik Arvidsson |
|-----------------------------------------------------------------------------|
| This software is provided "as is", without warranty of any kind, express or |
| implied, including but not limited to the warranties of merchantability, |
| fitness for a particular purpose and noninfringement. In no event shall the |
| authors or copyright holders be liable for any claim, damages or other |
| liability, whether in an action of contract, tort or otherwise, arising |
| from, out of or in connection with the software or the use or other |
| dealings in the software. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| This software is available under the three different licenses mentioned |
| below. To use this software you must chose, and qualify, for one of those. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Non-Commercial License http://webfx.eae.net/license.html |
| Permits anyone the right to use the software in a non-commercial context |
| free of charge. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| The WebFX Commercial license http://webfx.eae.net/commercial.html |
| Permits the license holder the right to use the software in a commercial |
| context. Such license must be specifically obtained, however it's valid for |
| any number of implementations of the licensed software. |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
| GPL - The GNU General Public License http://www.gnu.org/licenses/gpl.txt |
| Permits anyone the right to use and modify the software without limitations |
| as long as proper credits are given and the original and modified source |
| code are included. Requires that the final product, software derivate from |
| the original source or any software utilizing a GPL component, such as |
| this, is also licensed under the GPL license. |
|-----------------------------------------------------------------------------|
| 2003-01-10 | First version |
| 2003-01-19 | Minor changes to the date parsing |
| 2003-01-28 | JScript 5.0 fixes (no support for 'in' operator) |
| 2003-02-01 | Sloppy typo like error fixed in getInnerText |
|-----------------------------------------------------------------------------|
| Created 2003-01-10 | All changes are in the log above. | Updated 2003-02-01 |
\----------------------------------------------------------------------------*/


function SortableTable(oTable, oSortTypes) {

this.element = oTable;
this.tHead = oTable.tHead;
this.tBody = oTable.tBodies[0];
this.document = oTable.ownerDocument || oTable.document;

this.sortColumn = null;
this.descending = null;

var oThis = this;
this._headerOnclick = function (e) {
oThis.headerOnclick(e);
};


// only IE needs this
var win = this.document.defaultView || this.document.parentWindow;
this._onunload = function () {
oThis.destroy();
};
if (win && typeof win.attachEvent != "undefined") {
win.attachEvent("onunload", this._onunload);
}

this.initHeader(oSortTypes || []);
}

SortableTable.gecko = navigator.product == "Gecko";
SortableTable.msie = /msie/i.test(navigator.userAgent);
// Mozilla is faster when doing the DOM manipulations on
// an orphaned element. MSIE is not
SortableTable.removeBeforeSort = SortableTable.gecko;

SortableTable.prototype.onsort = function () {};

// adds arrow containers and events
// also binds sort type to the header cells so that reordering columns does
// not break the sort types
SortableTable.prototype.initHeader = function (oSortTypes) {
var cells = this.tHead.rows[0].cells;
var l = cells.length;
var img, c;
for (var i = 0; i < l; i++) {
c = cells[i];
img = this.document.createElement("IMG");
img.src = "images/blank.png";
c.appendChild(img);
if (oSortTypes[i] != null) {
c._sortType = oSortTypes[i];
}
if (typeof c.addEventListener != "undefined")
c.addEventListener("click", this._headerOnclick, false);
else if (typeof c.attachEvent != "undefined")
c.attachEvent("onclick", this._headerOnclick);
}
this.updateHeaderArrows();
};

// remove arrows and events
SortableTable.prototype.uninitHeader = function () {
var cells = this.tHead.rows[0].cells;
var l = cells.length;
var c;
for (var i = 0; i < l; i++) {
c = cells[i];
c.removeChild(c.lastChild);
if (typeof c.removeEventListener != "undefined")
c.removeEventListener("click", this._headerOnclick, false);
else if (typeof c.detachEvent != "undefined")
c.detachEvent("onclick", this._headerOnclick);
}
};

SortableTable.prototype.updateHeaderArrows = function () {
var cells = this.tHead.rows[0].cells;
var l = cells.length;
var img;
for (var i = 0; i < l; i++) {
img = cells[i].lastChild;
if (i == this.sortColumn)
img.className = "sort-arrow " + (this.descending ? "descending" : "ascending");
else
img.className = "sort-arrow";
}
};

SortableTable.prototype.headerOnclick = function (e) {
// find TD element
var el = e.target || e.srcElement;
while (el.tagName != "TD")
el = el.parentNode;

this.sort(el.cellIndex);
};

SortableTable.prototype.getSortType = function (nColumn) {
var cell = this.tHead.rows[0].cells[nColumn];
var val = cell._sortType;
if (val != "")
return val;
return "String";
};

// only nColumn is required
// if bDescending is left out the old value is taken into account
// if sSortType is left out the sort type is found from the sortTypes array

SortableTable.prototype.sort = function (nColumn, bDescending, sSortType) {
if (sSortType == null)
sSortType = this.getSortType(nColumn);

// exit if None
if (sSortType == "None")
return;

if (bDescending == null) {
if (this.sortColumn != nColumn)
this.descending = true;
else
this.descending = !this.descending;
}

this.sortColumn = nColumn;

if (typeof this.onbeforesort == "function")
this.onbeforesort();

var f = this.getSortFunction(sSortType, nColumn);
var a = this.getCache(sSortType, nColumn);
var tBody = this.tBody;

a.sort(f);

if (this.descending)
a.reverse();

if (SortableTable.removeBeforeSort) {
// remove from doc
var nextSibling = tBody.nextSibling;
var p = tBody.parentNode;
p.removeChild(tBody);
}

// insert in the new order
var l = a.length;
for (var i = 0; i < l; i++)
tBody.appendChild(a[i].element);

if (SortableTable.removeBeforeSort) {
// insert into doc
p.insertBefore(tBody, nextSibling);
}

this.updateHeaderArrows();

this.destroyCache(a);

if (typeof this.onsort == "function")
this.onsort();
};

SortableTable.prototype.asyncSort = function (nColumn, bDescending, sSortType) {
var oThis = this;
this._asyncsort = function () {
oThis.sort(nColumn, bDescending, sSortType);
};
window.setTimeout(this._asyncsort, 1);
};

SortableTable.prototype.getCache = function (sType, nColumn) {
var rows = this.tBody.rows;
var l = rows.length;
var a = new Array(l);
var r;
for (var i = 0; i < l; i++) {
r = rows[i];
a[i] = {
value: this.getRowValue(r, sType, nColumn),
element: r
};
};
return a;
};

SortableTable.prototype.destroyCache = function (oArray) {
var l = oArray.length;
for (var i = 0; i < l; i++) {
oArray[i].value = null;
oArray[i].element = null;
oArray[i] = null;
}
}

SortableTable.prototype.getRowValue = function (oRow, sType, nColumn) {
var s;
var c = oRow.cells[nColumn];
if (typeof c.innerText != "undefined")
s = c.innerText;
else
s = SortableTable.getInnerText(c);
return this.getValueFromString(s, sType);
};

SortableTable.getInnerText = function (oNode) {
var s = "";
var cs = oNode.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
s += SortableTable.getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
s += cs[i].nodeValue;
break;
}
}
return s;
}

SortableTable.prototype.getValueFromString = function (sText, sType) {
switch (sType) {
case "Number":
return Number(sText);
case "CaseInsensitiveString":
return sText.toUpperCase();
case "Date":
var parts = sText.split("-");
var d = new Date(0);
d.setFullYear(parts[0]);
d.setDate(parts[2]);
d.setMonth(parts[1] - 1);
return d.valueOf();
}
return sText;
};

SortableTable.prototype.getSortFunction = function (sType, nColumn) {
return function compare(n1, n2) {
if (n1.value < n2.value)
return -1;
if (n2.value < n1.value)
return 1;
return 0;
};
};

SortableTable.prototype.destroy = function () {
this.uninitHeader();
var win = this.document.parentWindow;
if (win && typeof win.detachEvent != "undefined") { // only IE needs this
win.detachEvent("onunload", this._onunload);
}
this._onunload = null;
this.element = null;
this.tHead = null;
this.tBody = null;
this.document = null;
this._headerOnclick = null;
this.sortTypes = null;
this._asyncsort = null;
this.onsort = null;
};




############# Fichier html ##############
<HTML>
<HEAD>
<SCRIPT SRC="js/sortabletable.js"></SCRIPT>
<SCRIPT>
<!-- init : insère les divs de travail dans les cellules de la table -->
function entete_init(){
for(i=0; i<TEntete.rows[0].cells.length-1; i++){
TEntete.rows[0].cells[i].innerHTML = '<DIV STYLE="overflow: hidden; width: 20px;" ID="head'+i+'" ONCLICK="arrow_mng(arrow'+i+')"><NOBR><SPAN ID="arrow'+i+'" STYLE="color: red; font-family: wingdings 3;"></SPAN>'+TEntete.rows[0].cells[i].innerHTML+'</NOBR></DIV>';
}
}

<!-- arrow_mng : gestion de l affichage des fleches de tri -->
function arrow_mng(obj){
var tmp = obj.innerHTML;
for(i=0; i<TEntete.rows[0].cells.length-1; i++){
document.all.item('arrow'+i).innerHTML = "";
}
if(tmp == "") obj.innerHTML = "h";
else if(tmp == "h") obj.innerHTML = "i";
else if(tmp == "i") obj.innerHTML = "h";
}

<!-- chkdim : renvoie la largeur en pixel de l'objet obj fourni en paramètre -->
function chkdim(obj) {
oBndRct = obj.getBoundingClientRect();
nWidth = oBndRct.right - oBndRct.left + 1;
nHeight = oBndRct.bottom - oBndRct.top + 1;
return nWidth;
}

<!-- setcolswidth : ajuste la largeur des cellules contenant les entetes de colonne -->
function setcolswidth(){
DBody.style.width = '100%'; // On ajuste la taille du tableau de donnée par rapport a son conteneur parent (ici la page)
TEntete.style.width = chkdim(TBody)+16; // le +16 correspond a la reserve de la barre de défilement
for(i=0; i<=document.all.TBody.rows[1].cells.length-1; i++){ // pour chaque colonne de la table de données on traite l'entete associée...
document.all.TEntete.rows[0].cells[i].style.width=chkdim(document.all.TBody.rows[1].cells[i])-9; // on ajuste la taille de la cellule contenant l entete, le 9 est un coeff correcteur pour palier a n décalage probablement lié a l épaisseur des bordures
document.all.item('head'+i).style.width = chkdim(document.all.TBody.rows[1].cells[i])-9; // on fixe la taille du div (indispensable pour l'overflow hidden dans l'entete)
}
DBody.style.width = chkdim(DBody)-2; // on réduit le div contenant les données de 2 px pour ajustement correctif
if(chkdim(DBody)<chkdim(TEntete)) DBody.style.width = chkdim(TEntete)-1; // vérification et synchro forcée (en cas d'écrasement excessif de la table, on pourrait avoir un body plus étroit que la barre d'intitulés)
}
</SCRIPT>
<STYLE>
.THead {border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: 1px solid buttonshadow;
border-right: 1px solid buttonshadow;
background: buttonface;
padding-left: 3px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 1px;
font-family: tahoma;
font-size: 11px;
overflow: none;
font-weight: bold;
width: 10px;
cursor: default; }
.TBody {text-align: justify;
border-collapse: collapse;
border: 1px solid activeborder ;
border-top: 0px;
border-left: 0px;
background: white;
padding-left: 3px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 1px;
font-family: tahoma;
font-size: 11px; }
.entete{border-left: 1px solid buttonshadow;
border-top: 1px solid buttonshadow;
border-right: 1px solid buttonhighlight;
cellspacing: 0px; }
.DBody {overflow: auto;
border-left: 1px solid buttonshadow;
border-bottom: 1px solid buttonhighlight;
border-right: 1px solid buttonhighlight;
border-top: 0px; }
body { border: 0px;
background: buttonface;
scrollbar-3dlight-color: buttonhighlight;
scrollbar-arrow-color: threeddarkshadow;
scrollbar-track-color: silver;
scrollbar-base-color: buttonface;
scrollbar-darkshadow-color: buttonshadow;
scrollbar-face-color: buttonface;
scrollbar-highlight-color: buttonface;
scrollbar-shadow-color: buttonface; }
</STYLE>
</HEAD>
<BODY SCROLL="no" ONLOAD="entete_init(); setcolswidth();" ONRESIZE="setcolswidth();">

<!-- Table contenant les entetes -->
<TABLE ID="TEntete" CLASS="entete" CELLSPACING="0">
<TR>
<TD CLASS="THead" ONCLICK="st1.sort(0)">Colonne 1</TD>
<TD CLASS="THead" ONCLICK="st1.sort(1)">Colonne 2</TD>
<TD CLASS="THead" ONCLICK="st1.sort(2)">Colonne 3</TD>
<TD CLASS="THead" ONCLICK="st1.sort(3)">Colonne 4</TD>
<TD CLASS="THead" ONCLICK="st1.sort(4)">Colonne 5</TD>
<TD CLASS="THead" ONCLICK="st1.sort(5)">Colonne 6</TD>
<TD CLASS="THead" STYLE="width:16px;"> </TD>
</TR>
</TABLE>

<!-- DIV et TABLE contenant les données -->
<DIV ID="DBody" CLASS="Dbody" STYLE="height: 150px;">
<TABLE CLASS="TBody" STYLE="width:100%;" ID="TBody" CELLSPACING="0">
<THEAD STYLE="display: none;">
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD CLASS="TBody">
2Ceci est un test de texte long, ceci est un test de texte long<BR>
Ce1ci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
</TD>
<TD CLASS="TBody">1Ca c'est moins long Pif pouf paf paf pof</TD>
<TD CLASS="TBody">8et ca c'est court</TD>
<TD CLASS="TBody">1ultra-court</TD>
<TD CLASS="TBody">3short</TD>
<TD CLASS="TBody">6shor tsh orts hor tsh ort</TD>
</TR>
<TR>
<TD CLASS="TBody">
Ceci est un test de texte long, ceci est un test de texte long<BR>
5Ceci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
</TD>
<TD CLASS="TBody">2Ca c'est moins long Pif pouf paf paf pof</TD>
<TD CLASS="TBody">7et ca c'est court</TD>
<TD CLASS="TBody">5ultra-court</TD>
<TD CLASS="TBody">5short</TD>
<TD CLASS="TBody">7shor tsh orts hor tsh ort</TD>
</TR>
<TR>
<TD CLASS="TBody">
2Ceci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
</TD>
<TD CLASS="TBody">3Ca c'est moins long Pif pouf paf paf pof</TD>
<TD CLASS="TBody">6et ca c'est court</TD>
<TD CLASS="TBody">3ultra-court</TD>
<TD CLASS="TBody">2short</TD>
<TD CLASS="TBody">8shor tsh orts hor tsh ort</TD>
</TR>
<TR>
<TD CLASS="TBody">
1Ceci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
Ceci est un test de texte long, ceci est un test de texte long<BR>
</TD>
<TD CLASS="TBody">4Ca c'est moins long Pif pouf paf paf pof</TD>
<TD CLASS="TBody">5et ca c'est court</TD>
<TD CLASS="TBody">2ultra-court</TD>
<TD CLASS="TBody">2Ceci est un test de texte long, ceci est</TD>
<TD CLASS="TBody">9shor tsh orts hor tsh ort</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

<SCRIPT>
var st1 = new SortableTable(document.getElementById("TBody"),["CaseInsensitiveString", "CaseInsensitiveString", "CaseInsensitiveString", "CaseInsensitiveString", "CaseInsensitiveString", "CaseInsensitiveString"]);
</SCRIPT>
</BODY>
</HTML>





-------------------------------
Réponse au message :
-------------------------------

> Y a t-il moyen de figer une ligne de tableau pour que lorsqu'on défile la page grace a l'ascenseur cette ligne reste en haut de page, une sorte de recalculation des coordonnées de la ligne ligne je, sais pas un truc comme ca. Merci beaucoup de m'aider je suis grave dans la muise !!

GEANT ce source !

Juste un ptit blême d'affichage, si la liste ne comprend aucun élément ou si le nombre de lignes ne dépasse pas la hauteur prévue dans le style du DBody (aucun scroll), alors on aperçoit un décalage...

Mais facile à résoudre
j'ai rajouté ceci après le </TBODY>

<TR>
<TD STYLE="height: 150px;"></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>

ou height est la hauteur du DBody en question...

Allez, bye

Merci de votre réponse, mais en utilisant votre code "test", déjà sur mozilla bah pb pour les colonnes d'en tête, puis sur IE, je pensais que le but était que lorsque le tableau dépasse la hauteur de la page, en baissant l'ascenseur, la première ligne serait toujours visible, un peu comme dans excel.
Alors que là, il ne fait qu'rdonner le tableau et ne mets pas d'ascenseur si celui-ci est trop grand... Qqun aurait-il une solution alternative.
Bonne journée merci.