[Résolu] Problème de CSS sur un tri ajax d'un tableau

Problème de CSS sur un tri ajax d'un tableau [Résolu] - HTML/CSS - Programmation

Marsh Posté le 05-03-2009 à 23:01:14    

Bonjour,
 
Je m'en remets à vous pour un souci sur lequel je butte depuis plusieurs heures maintenant.
J'ai mis en place un script Javascript (ajax) qui me permet de trier un tableau selon la colonne. Il marche impeccablement, mais comme vous pourrez le voir, lors du tri, le CSS foire complétement puisque au départ une ligne sur deux à un background-color en blanc et l'autre en gris/bleu. Lors du tri, il ne tri pas le CSS avec les données.
 
Quelqu'un aurait-il une idée d'où le code doit être modifié.
 
Voici le script intégré dans mon site : http://www.ninsight.fr/FR/?page=communaute (il vous suffit de jouer avec le tableau pour voir le problème)
 
Voici l'url du script javascript (il s'affiche directement dans le navigateur) http://www.kryogenix.org/code/brow [...] rttable.js
 
Voici l'url du projet javascript http://www.kryogenix.org/code/browser/sorttable/
 
Je vous remercie


Message édité par creusois le 13-03-2009 à 11:10:57
Reply

Marsh Posté le 05-03-2009 à 23:01:14   

Reply

Marsh Posté le 05-03-2009 à 23:26:08    

Ah, ha, j'utilise exactement le même projet et j'ai eu exactement le même problème. J'ai modifié les lignes suivantes :

Code :
  1. for (var j=0; j<row_array.length; j++) {
  2.    tb.appendChild(row_array[j][1]);
  3. }

En:

Code :
  1. for (var j in row_array) {
  2.    rows = row_array[j][1]
  3.    tb.appendChild(rows)
  4.    addOrRemoveClass(rows, 'odd', j % 2 == 0)
  5. }


Edit: ah, ouais, addOrRemoveClass est une fonction maison, qui fait ce qu'elle décrit.

Message cité 1 fois
Message édité par tpierron le 05-03-2009 à 23:26:56
Reply

Marsh Posté le 06-03-2009 à 16:24:11    

tpierron a écrit :

Ah, ha, j'utilise exactement le même projet et j'ai eu exactement le même problème. J'ai modifié les lignes suivantes :

Code :
  1. for (var j=0; j<row_array.length; j++) {
  2.    tb.appendChild(row_array[j][1]);
  3. }

En:

Code :
  1. for (var j in row_array) {
  2.    rows = row_array[j][1]
  3.    tb.appendChild(rows)
  4.    addOrRemoveClass(rows, 'odd', j % 2 == 0)
  5. }


Edit: ah, ouais, addOrRemoveClass est une fonction maison, qui fait ce qu'elle décrit.


 
Bonjour tpierron
 
Merci beaucoup pour ton aide. Malheureusement, je n'ai aucune idée de comment créer mon addOrRemoveClass ? J'ai bien compris qu'elle devait ajouter ou non une class à td en cours, mais je n'ai aucune idée de comment faire.
 
Pourrais-tu m'aider là-dessus ?
 
Merci

Reply

Marsh Posté le 06-03-2009 à 16:48:44    

Bah, si ton TR n'a pas d'autre class que odd/even, tu peux faire un truc du genre :

Code :
  1. for (var j in row_array) {
  2.     rows = row_array[j][1]
  3.     tb.appendChild(rows)
  4.     rows.className = (j % 2 == 0 ? 'odd' : 'even')
  5. }


Bon, tu adapteras les noms de classe pour correspondre à ta css.

Reply

Marsh Posté le 06-03-2009 à 19:14:05    

tpierron a écrit :

Bah, si ton TR n'a pas d'autre class que odd/even, tu peux faire un truc du genre :

Code :
  1. for (var j in row_array) {
  2.     rows = row_array[j][1]
  3.     tb.appendChild(rows)
  4.     rows.className = (j % 2 == 0 ? 'odd' : 'even')
  5. }


Bon, tu adapteras les noms de classe pour correspondre à ta css.


 
Je vais avoir l'air d'un idiot, mais j'utilise un peu plus que des class CSS. Je te mets dans le message le bout de code.
 
Du coup, comment puis-je modifier la valeur dans mon onMouseOut ? (pour le style, pas de soucis, je vais externaliser ça dans mon fichier CSS).
 
Merci encore pour ton aide.
 
 

Code :
  1. $req = mysql_query($sql);
  2. $flag = 0;
  3. while ($data = mysql_fetch_array($req)) {
  4.   if ($flag == 0)
  5.     echo "<tr onclick=\"window.location.replace('?page=revendeur&r=".$data['id_revendeur']."');\" style=\"cursor:pointer;\" onMouseOver=\"this.style.background='#CCC';\" onMouseOut=\"this.style.background='#FFFFFF';\">";
  6.   else
  7.     echo "<tr onclick=\"window.location.replace('?page=revendeur&r=".$data['id_revendeur']."');\" style=\"background-color:#eaeaf2;cursor:pointer;\" onMouseOver=\"this.style.background='#CCC';\" onMouseOut=\"this.style.background='#eaeaf2';\">";
  8.   echo "<td>".$data["pays"]."</td>";
  9.   echo "<td>".$data["societe"]."</td>";
  10.   echo "</tr>";
  11.   $flag++;
  12.   if ($flag == 2)
  13.     $flag=0;
  14. }
  15. ?>
  16. </table><br />

Reply

Marsh Posté le 06-03-2009 à 19:46:27    

Ouais, heu, tu utilises directement l'attribut "style". Je te conseille fortement de passer par des classes CSS.
 
Pour ton onmouseout et onmouseover, j'utiliserais une fonction du genre :

Code :
  1. function mousemove(tr, clear)
  2. {
  3.    tr.className = clear ? (tr.rowIndex % 2 > 0 ? "odd" : "even" ) : "hot"
  4. }

Et au niveau HTML, un truc du genre :

Code :
  1. <tr onmouseout="mousemove(this, true)" onmouseover="mousemove(this, false)" ...>


Au niveau css tu auras donc 3 classes à définir : "hot", "odd" et "even".
Disclaimeur: pas testé, faudra sans doute ajuster la condition "tr.rowIndex % 2 > 0".

Reply

Marsh Posté le 06-03-2009 à 19:48:07    

Formidable, je vais travailler là dessus. Merci tpierron, je te tiens au courant.

Reply

Marsh Posté le 13-03-2009 à 11:11:24    

Bonjour et merci tpierron pour ton aide précieuse. J'ai pu résoudre mon problème.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed