Bonjour,
après avoir chercher sur le web et sur le forum, je n'est pas trouvé de solution.
Voici mon problème :
Je créer un site web et je ne connait pas du tout de langage à part le XHTML/CSS.
Je veux creer un tableau avec mes CD et ajouter un lien pour chaque CD (Partie déjà effectué)
Maintenant je veux deux flèche qui trie mon tableau selon le nom d'artiste, nom de l'album ou année de sortie. J'ai déjà essayer un script trouvé ici : http://www.javascriptfr.com/code.aspx?ID=29926
Cependant cela ne marche pas car le trie est bien effectué mais les liens reste aux mêmes endroits => Exemple : La première ligne renvoi toujours au premier lien quelques soit le trie.
Voici mon code XHTML :
<!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" xml:lang="fr">
<head>
<title>Discothèque de XXXX</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
.cd_tab
{
cursor: hand;
}
.cd_tab:hover
{
background-color: DeepSkyBLue;
}
table, tr, td, th
{
border: 0px;
border-collapse: collapse;
border-style : none;
}
</style>
</head>
<body>
<div id="image_titre"> </div>
<div id="en_tete"> <h1>Discothèque de XXX</h1> </div>
<div id="tout">
<div id="menu">
<h3 id="titre">Menu</h3>
<div class="sous-menu">
<ul>
<li> <h4> <a href="#mes_cd">Mes CD</a> </h4> </li>
<li> <h4> <a href="#mes_dvd">Mes DVD</a> </h4> </li>
<li> <h4> <a href="#concert">Les concerts</a> </h4> </li>
</ul>
</div>
<div class="sous-menu">
<ul>
<li> <h4> <a href="liens.html">Liens utiles</a> </h4> </li>
</ul>
</div>
</div>
<div id="corps">
<p>XXXXX<br/>
XXXX<br/>
XXX</p>
<p>XXX</p>
<p>XXXX </p>
<p>Si vous avez des sugestions de CD, vous pouvez m'envoyer un mail en cliquant<a href="mailto:shigeru94@gmail.com"> ici </a>.</p>
</div>
<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: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[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>
<div id="tableau_CD">
<caption id="mes_cd">Mes CD</caption>
<table>
<thead>
<tr>
<td>Artiste<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
<td>Nom de l'album<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
<td>Dâte de sortie<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
</tr>
</thead>
<tr class="cd_tab" onclick="document.location.href='cd01.html'">
<td>AC/DC</td>
<td>Back In Black</td>
<td>1980</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd02.html'">
<td>AC/DC</td>
<td>Backtracks</td>
<td>2009</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd03.html'">
<td>AC/DC</td>
<td>Black Ice</td>
<td>2008</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd04.html'">
<td>AC/DC</td>
<td>Highway To Hell</td>
<td>1979</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd05.html'">
<td>AC/DC</td>
<td>High Voltage</td>
<td>1976</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd06.html'">
<td>AC/DC</td>
<td>Live</td>
<td>1992</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd07.html'">
<td>AC/DC</td>
<td>The Razor's Edge</td>
<td>1990</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd08.html'">
<td>Aerosmith</td>
<td>Classics Live ! Complete</td>
<td>1987</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd09.html'">
<td>Aerosmith</td>
<td>Gold Disc</td>
<td>2005</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd10.html'">
<td>Aerosmith</td>
<td>Toys in the Attic</td>
<td>1975</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd11.html'">
<td>Arctic Monkeys</td>
<td>Favourite Worst Nightmare</td>
<td>2007</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd12.html'">
<td>Arctic Monkeys</td>
<td>Watever People Say I Am, That's What I'm Not</td>
<td>2006</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd13.html'">
<td>Chickenfoot</td>
<td>Chickenfoot</td>
<td>2009</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd14.html'">
<td>Dionysos</td>
<td>Monsters In Love</td>
<td>2005</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd15.html'">
<td>Franz Ferdinand</td>
<td>You Could Have It So Much Better</td>
<td>2005</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd16.html'">
<td>Green Day</td>
<td>American Idiot</td>
<td>2004</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd17.html'">
<td>Good Morning England</td>
<td>Movie Soundtrack</td>
<td>2009</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd18.html'">
<td>Guns N' Roses</td>
<td>Appetite for Destruction</td>
<td>1987</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd19.html'">
<td>Guns N' Roses</td>
<td>Chinese Democracy</td>
<td>2008</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd20.html'">
<td>Guns N' Roses</td>
<td>Greatest Hits</td>
<td>2004</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd21.html'">
<td>Iron Maiden</td>
<td>Edward The Great : Greatest Hits</td>
<td>2005</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd22.html'">
<td>Joe Satriani</td>
<td>Satriani Live !</td>
<td>2006</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd23.html'">
<td>Joe Satriani</td>
<td>Professor Satchafunkilus and the Musterion of Rock</td>
<td>2008</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd24.html'">
<td>Led Zeppelin II</td>
<td>Led Zeppelin II</td>
<td>1969</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd25.html'">
<td>The Answer</td>
<td>Everyday Demons</td>
<td>2009</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd26.html'">
<td>The Jimi Hendrix Experience</td>
<td>Electric Ladyland</td>
<td>1968</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd27.html'">
<td>The Rolling Stones</td>
<td>Shine a Light - Original Soundtrack</td>
<td>2008</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd28.html'">
<td>The Strokes</td>
<td>First Impressions of Earth</td>
<td>2006</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd29.html'">
<td>The White Stripes</td>
<td>Icky Thump</td>
<td>2007</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd30.html'">
<td>U2</td>
<td>War</td>
<td>1983</td>
</tr>
<tr class="cd_tab" onclick="document.location.href='cd31.html'">
<td>ZZ Top</td>
<td>Afterburner</td>
<td>1985</td>
</tr>
</table>
</div>
<div id="pied_de_page">
<p> <a href="qui_suis-je.html> Qui suis-je </a> <a href="mailto:shigeru94@gmail.com"> Me contacter </a> <br/>
Code et Design par XXXX </p>
</div>
</body>
</html>
J'aimerais obtenir une solution sans avoir à apprendre le Javascript. Je connait un peu de langage C (si cela peut servir ...)
Un lien vers une solution me suffirais (pas la besoin de refaire tout le code )
Merci d'avance.
On ne fait pas support des scripts foireux de codesource, pose ta question chez eux.
Trie d'un tableau avec liens
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
