Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript Changer l'ordre des lignes d'un tableau

Changer l'ordre des lignes d'un tableau

6 réponses
Avatar
ReM
Bonjour !

Je souhaite pouvoir changer l'ordre des lignes d'un tableau.
Je m'explique :
Voici mon tableau :
<TABLE>
<TR>
<TD>Nom</TD>
<TD>Monter</TD>
<TD>Descendre</TD>
</TR>
<TR>
<TD>Toto</TD>
<TD></TD>
<TD>-</TD>
</TR>
<TR>
<TD>Titi</TD>
<TD>+</TD>
<TD>-</TD>
</TR>
<TR>
<TD>Tata</TD>
<TD>+</TD>
<TD></TD>
</TR>
<TABLE>

En cliquant sur les + je souhaiterais faire monter ma ligne et en
cliquant sur le moins, la faire descendre, tout cela sans recharger ma page.

Si vous avez une idée !

Merci ;o)
Signaler un problème avec ce contenu

6 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
RPnich

Si vous avez une idée !
Bonsoir,


Faire l'essai avec des "ancres"
<body>
<table>
<a name="page1"> &nbsp;</a>
<table height="200" width="300">

<tr>
<td>Nom page1</td>
<td>Monter</td>
<td>Descendre</td>
</tr>
<tr>
<td>Toto</td>
<td></td>
<td><a href="sansnom2.html#page2">TITI</a></td>
</tr>
<tr>
<td>Titi</td>
<td>+</td>
<td>-</td>
</tr>
<tr>
<td>Tata</td>
<td>+</td>
<td>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>

<a name="page2">&nbsp;</a>
<table height="200" width="300">

<tr>
<td>Nom page2</td>
<td>Monter</td>
<td>Descendre</td>
</tr>
<tr>
<td>Toto</td>
<td></td>
<td>-</td>
</tr>
<tr>
<td>Titi</td>
<td><a href="sansnom2.html#page1">ToTo</a></td>
<td>-</td>
</tr>
<tr>
<td>Tata</td>
<td>+</td>
<td>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
</td>
</tr>
</table>
</table>
</body>

le <br> simulent le remplissage de la page....
C'est à affiner, bien entendu.

--
R. Peynichout
www.peynichout.com
www.chez.com/rpenich

Avatar
ReM
Merci mais j'aurais préféré une solution en javascript...
Ton idée est bonne mais je ne veux pas qu'il y ait de scroll dans ma page.

Merci


Si vous avez une idée !


Bonsoir,

Faire l'essai avec des "ancres"
<body>
<table>
<a name="page1"> &nbsp;</a>
<table height="200" width="300">

<tr>
<td>Nom page1</td>
<td>Monter</td>
<td>Descendre</td>
</tr>
<tr>
<td>Toto</td>
<td></td>
<td><a href="sansnom2.html#page2">TITI</a></td>
</tr>
<tr>
<td>Titi</td>
<td>+</td>
<td>-</td>
</tr>
<tr>
<td>Tata</td>
<td>+</td>
<td>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>

<a name="page2">&nbsp;</a>
<table height="200" width="300">

<tr>
<td>Nom page2</td>
<td>Monter</td>
<td>Descendre</td>
</tr>
<tr>
<td>Toto</td>
<td></td>
<td>-</td>
</tr>
<tr>
<td>Titi</td>
<td><a href="sansnom2.html#page1">ToTo</a></td>
<td>-</td>
</tr>
<tr>
<td>Tata</td>
<td>+</td>
<td>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
</td>
</tr>
</table>
</table>
</body>

le <br> simulent le remplissage de la page....
C'est à affiner, bien entendu.




Avatar
YD
Merci mais j'aurais préféré une solution en javascript...


En voici une à étudier et adapter à tes besoins. Elle ne fonctionne
que sur des navigateurs récents (IE 5.5/Win minimum je pense, les
Gecko, Opera 8...).

<HTML>
<HEAD>
<TITLE>Changer l'ordre des lignes d'un tableau</TITLE>
<script type="text/javascript">
function moveup(row){
var i, o;
var tbody=document.getElementsByTagName("tbody")[0], allTRows=tbody.rows;
for(i=1;i<allTRows.length;i++)
if(allTRows[i]==row){
o=allTRows[i-1].cloneNode(true);
tbody.replaceChild(allTRows[i],allTRows[i-1]);
if(i<allTRows.length)tbody.insertBefore(o,allTRows[i]);
else tbody.appendChild(o);
return
}
}

function movedown(row){
var i, o;
var tbody=document.getElementsByTagName("tbody")[0], allTRows=tbody.rows;
for(i=0;i<allTRows.length-1;i++)
if(allTRows[i]==row){
o=allTRows[i+1].cloneNode(true);
tbody.replaceChild(allTRows[i],allTRows[i+1]);
if(i<allTRows.length){tbody.insertBefore(o,allTRows[i]);
tbody.insertBefore(o,allTRows[i])}
else tbody.appendChild(o);
return
}
}
</script>
</HEAD>
<BODY>
<TABLE border=1>
<THEAD>
<TR>
<TD>Nom</TD>
<TD>Monter</TD>
<TD>Descendre</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Toto</TD>
<TD onclick="moveup(this.parentNode)">+</TD>
<TD onclick="movedown(this.parentNode)">-</TD>
</TR>
<TR>
<TD>Titi</TD>
<TD onclick="moveup(this.parentNode)">+</TD>
<TD onclick="movedown(this.parentNode)">-</TD>
</TR>
<TR>
<TD>Tutu</TD>
<TD onclick="moveup(this.parentNode)">+</TD>
<TD onclick="movedown(this.parentNode)">-</TD>
</TR>
<TR>
<TD>Tonton</TD>
<TD onclick="moveup(this.parentNode)">+</TD>
<TD onclick="movedown(this.parentNode)">-</TD>
</TR>
<TR>
<TD>Tata</TD>
<TD onclick="moveup(this.parentNode)">+</TD>
<TD onclick="movedown(this.parentNode)">-</TD>
</TR>
</TBODY>
<TABLE>
</BODY>
</HTML>

--
Y.D.

Avatar
Thibaut Allender
En voici une à étudier et adapter à tes besoins. Elle ne fonctionne
que sur des navigateurs récents (IE 5.5/Win minimum je pense, les
Gecko, Opera 8...).


on trouve un autre script du genre ici:
http://www.letselplein.nl/~exemplarisch/sort-table/sort-table-rows.html

--
thibaut allender | freelance | http://capsule.org

Avatar
YD

on trouve un autre script du genre ici:
http://www.letselplein.nl/~exemplarisch/sort-table/sort-table-rows.html


Ou encore là <http://ygda.free.fr/sortTableByCols.htm> ;-)

--
Y.D.

Avatar
ASM
YD wrote:

En voici une à étudier et adapter à tes besoins.


Ha oui ! pas mal !
Hop! en archives des fois qu'un jour ? ;-)

Elle ne fonctionne
que sur des navigateurs récents (IE 5.5/Win minimum je pense, les
Gecko, Opera 8...).


IE 5.2 et FF (nouvo Mac) c'est OK

--
Stephane Moriaux et son [moins] vieux Mac