Changement de couleur d'une ligne de tableau avec le passage de la souris ou par clic

Soyez le premier à donner votre avis sur cette source.

Snippet vu 24 495 fois - Téléchargée 30 fois

Contenu du snippet

Ce script permet de modifier la couleur d'une ligne en passant la souris dessus.
Quand on clic sur une ligne celle-ci est selectionnée.
Si on clic sur la ligne deja selectionnée, on la déselectionne.
Si on a deja selectionner une ligne et que l'on souhaite en selectionner une autre, il suffit de cliquer sur l'autre.
Script très pratique pour les tableaux creés dynamiquement en php à l'aide d'une base mysql.

Source / Exemple :


/************************
Contenu du fichier selection.js

                                                  • /
var select = 0; var temp; // colore la ligne en transparent function transp(ligne) { if (ligne.style.background!='red') ligne.style.background='transparent'; } // colore la ligne en lavande function lavend(ligne) { if (ligne.style.background!='red') ligne.style.background='lavender'; } // colore la ligne en transparent si elle est rouge // remet en transparent la ligne selectionnée precedement et colore celle si en rouge si differente // indique qu'une ligne est selectionnée en mettant le parametre select a 1 function selec(ligne) { if (!select) { select = 1; ligne.style.background='red'; temp = ligne; } else { if (ligne.style.background=='red') { select = 0; ligne.style.background='transparent'; } else { temp.style.background='transparent'; ligne.style.background='red'; temp=ligne; } } } /********************************** a placer dans le fichier contenant le tableau
                                                                      • /
<!-- Au debut de la page ou se trouve le tableau --> <script language="JavaScript" src="selection.js"></script> <!-- Puis sur chaque ligne du tableau : --> <TR name="ligne" onclick="selec(this)" onmousemove="lavend(this)" onmouseout ="transp(this)">;

A voir également

Ajouter un commentaire Commentaires
soumboula Messages postés 15 Date d'inscription lundi 13 février 2006 Statut Membre Dernière intervention 29 juillet 2008
29 mai 2008 à 16:33
svp bradon j'ai un pti problème le script ne marche po je en sais po prkoi pour ce dernier j'ai suivi les inctruction ke vous aviez signaler en bas, mais pour chaque ligne voila ske j'avai mis:

<table width="684" border="0" align="center" cellpadding="4" cellspacing="1">
<tr name="ligne" onclick="selec(this)" onmousemove="lavend(this)" onmouseout ="transp(this)" bgcolor="#FF9933" style="background-color:#fff">
<td width="163" bgcolor="#FF9933">N° de Compte</td>
<td width="183" bgcolor="#FF9933">Libellé du Compte</td>
</tr>
je travaille en php si vous avez une solution dites le moi svp, le plus vite possible
rleveau Messages postés 5 Date d'inscription mercredi 31 mai 2006 Statut Membre Dernière intervention 2 juin 2006
2 juin 2006 à 18:21
Pour info, mais aussi à titre de question...
J'ai remplacé les couleurs 'red' etc. par des valeurs hexa ; ca ne fonctionne plus !!!
C'est normal à votre avis ? Une solution ?
rleveau Messages postés 5 Date d'inscription mercredi 31 mai 2006 Statut Membre Dernière intervention 2 juin 2006
2 juin 2006 à 17:11
J'AI TROUVE !!! (c'est rare que j'trouve des trucs comme ça alors j'enprofites...)

Ca donne :

// colore la ligne en transparent
function transp(ligne)
{
if (ligne!=temp && ligne.style.background!='red') ligne.style.background='transparent';
}

// colore la ligne en lavande
function lavend(ligne)
{
if (ligne!=temp && ligne.style.background!='red') ligne.style.background='lavender';
}

Et Mozilla prend la chose plutôt bien.
rleveau Messages postés 5 Date d'inscription mercredi 31 mai 2006 Statut Membre Dernière intervention 2 juin 2006
2 juin 2006 à 16:55
Bien d'accord !!!
Ce script est bien pratique ! Merci à toi Brandon !

Mais je suis comme Amlette, j'aimerais le faire fonctionner sur Mozilla...
Le onMouseOut prend systématiquement la main, même après un onClick.

Si qq'un à une idée...

Merci.
sasuke237 Messages postés 5 Date d'inscription samedi 15 octobre 2005 Statut Membre Dernière intervention 21 janvier 2006
6 mai 2006 à 11:02
nul
Afficher les 15 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.