begin process at 2012 02 13 13:28:07
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > CHANGEMENT DE COULEUR D'UNE LIGNE DE TABLEAU AVEC LE PASSAGE DE LA SOURIS OU PAR CLIC

CHANGEMENT DE COULEUR D'UNE LIGNE DE TABLEAU AVEC LE PASSAGE DE LA SOURIS OU PAR CLIC


 Information sur la source

Note :
9,5 / 10 - par 2 personnes
9,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Niveau :Débutant Date de création :05/07/2004 Vu :17 226

Auteur : brandon

Ecrire un message privé
Commentaire sur cette source (15)
Ajouter un commentaire et/ou une note

 Description

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

  • /************************
  • 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)">;
/************************
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)">;



 Sources de la même categorie

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol

Commentaires et avis

Commentaire de phm le 06/07/2004 10:46:44

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

Commentaire de phm le 06/07/2004 10:46:44

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

Commentaire de phm le 06/07/2004 12:50:12

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;
    }
  }

}

Commentaire de phm le 06/07/2004 12:52:06

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)"

Commentaire de jaber le 17/08/2004 12:19:39

pas mal du tout !

Commentaire de DjZebulon le 17/03/2005 12:40:17

génial exactement se qu'il me fallait et simple. Grand merci

Commentaire de nitrox13 le 13/04/2005 00:52:57

Salut,
J'ai un tableau (extraction base sql) et une région répétée.
Ton script ne fonctionne pas (je ne sais pas ou mettre ton code).
Peux tu m'aider

Commentaire de nitrox13 le 13/04/2005 01:00:01

J'ai trouvé, il y a un ; en trop a la fin de ton code.

Commentaire de Amlette le 30/11/2005 03:11:00

Script bien pratique, merci. Je cherche une version similaire compatible avec Mozilla. S'il faut ajouter qu'une ou quelques lignes supplémentaires, n'hésitez pas à me les communiquer.

Commentaire de sasuke237 le 06/05/2006 11:02:37

nul

Commentaire de sasuke237 le 06/05/2006 11:02:39

nul

Commentaire de rleveau le 02/06/2006 16:55:27

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.

Commentaire de rleveau le 02/06/2006 17:11:37

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.

Commentaire de rleveau le 02/06/2006 18:21:32

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 ?

Commentaire de soumboula le 29/05/2008 16:33:55

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"><span class="style1">N° de Compte</span></span></td>
<td width="183" bgcolor="#FF9933"><span class="style1">Libellé du Compte</span></span></td>
</tr>
je travaille en php si vous avez une solution dites le moi svp, le plus vite possible

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,437 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales