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 21 642 fois - Téléchargée 28 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

cs_phm
Messages postés
49
Date d'inscription
jeudi 17 janvier 2002
Statut
Membre
Dernière intervention
23 avril 2009
-
Bravo,
c'est très intéressant et pratique.
je vais l'utiliser.
Si je peux te rendre service
n'hésite pas

cordialement

Philippe
cs_phm
Messages postés
49
Date d'inscription
jeudi 17 janvier 2002
Statut
Membre
Dernière intervention
23 avril 2009
-
Bravo,
c'est très intéressant et pratique.
je vais l'utiliser.
Si je peux te rendre service
n'hésite pas

cordialement

Philippe
cs_phm
Messages postés
49
Date d'inscription
jeudi 17 janvier 2002
Statut
Membre
Dernière intervention
23 avril 2009
-
si sur

onclick="selec(this);"

tu ajoute une url en 2nd paramètre

onclick="selec(this,'\4daction\hgsdhgdsh\')"

tu peux ouvrir une fiche sur double clic
(si tu as une liste avec des fiches + détaillées)

en modifiant le fichier .js comme suit :

(j'ai mis des white au lieu de transparent)
(parent.window.location=newurl;)

/************************
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='white';
}

// 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,newurl)
{
if (!select)
{ select = 1;
ligne.style.background='red';
temp = ligne;

}
else
{
if (ligne.style.background=='red')
{ select = 0;
ligne.style.background='white';
parent.window.location=newurl;
}
else
{ temp.style.background='white';
ligne.style.background='red';
temp=ligne;
}
}

}
cs_phm
Messages postés
49
Date d'inscription
jeudi 17 janvier 2002
Statut
Membre
Dernière intervention
23 avril 2009
-
mon url est un peu curieuse car j'utilise un serveur web spécifique (4eme dimension)
vous pouvez remplacer

onclick="selec(this,'\4daction\hgsdhgdsh\')"

par

onclick="selec(this,monurlamoi)"
cs_jaber
Messages postés
2
Date d'inscription
lundi 17 novembre 2003
Statut
Membre
Dernière intervention
17 août 2004
-
pas mal du tout !

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.