11550 sujets

JavaScript, DOM et API Web HTML5

Fonction changement de couleur sur clic [Résolu]

Suite à ce message :

http://forum.alsacreations.com/topic.php?fid=4&tid=248

Je repasse dans le topic JS. Après avoir suivi les conseils de ElMoustiko, j'ai mis en place la fonction suivante

function changeRowColor() {

trs = document.getElementById("table_color").getElementsByTagName('tr');

  trs.onclick = function() {

		if(this.style.background != '#FFCC99')
	
		{
	
		  this.style.background = '#FFCC99' ;
	
		}
	
		else
	
		{
	
		  this.style.background = '#ffffff' ;
	
		}

  }

}


Ceci se trouve dans un fichier appelé couleur_tab.js, lui-même appelé dans mon fichier php par

<script language="javascript" type="text/javascript" src="../scripts/couleur_tab.js"></script>


L'entete de mon tableau

<table width=\"100%\" id=\"table_color\">


Ce dernier est générer par php dans la page ou j'appel le fichier js.

Par contre, je n'ai pas bien compris ou mettre le window.onload ?

<body onLoad="changeRowColor"> Smiley idee Smiley rolleyes

Merci Smiley cligne
Modifié le 09 Nov 2004 - 15:40
Oui, tu peut faire comme ça ! très exactement :

<body onload="changeRowColor()">


Sinon, tu peut aussi utiliser la fonction window.onload, en la maitant à la fin de ton fichier JS (juste après ta fonction) :

window.onload=changeRowColor


Cette dernière méthode peut poser des problèmes si tu as plusieurs fonctions à lancer au chargement de ta page. Essaye de lire cet article sur le sujet :
> http://www.ibilab.net/webdev/articles/Javascript/evenements-multiples-chargement-page-7.htm
Non, tu le laisses dans le script dans ton fichier externe *.js
Je t'expliquerais comment faire plus complet et plus propre comme script quand j'aurais le temps, sauf si quelqu'un l'a fait avant.
OK merci,

J'ai donc suivi vos conseils et essayer les deux techniques, mais aucunes ne marchent Smiley bawling Serait-il possible que ma classe css gène le script ?

<tr class=\"listing_red\">


j'ai aussi un autre fichier *.js que je charge, y aurait il des conflits ?

<script language="javascript" type="text/javascript" src="../scripts/couleur_tab.js"></script>
<script language="javascript" type="text/javascript" src="../scripts/menu.js"></script>

Modifié le 05 Nov 2004 - 10:57
Déjà tu peux virer le language="javascript"

Ensuite pas de conflit ni avec la class ni avec le multiple appel.

C'est sûrement une boulette au niveau de mon code fait vite fait mal fait sans tests ;) je jette un oeil dès que j'ai fini mes lectures de forum !
Lol, j'ai juste oublié la boucle "for" !!!!!! allez je m'y met

JavaScript

function changeRowColor()
{
	trs = document.getElementById("table_color").getElementsByTagName('tr');
	for(var i = 0 ; i < trs.length ; i++)
	{
		trs[ i].onclick = function()
		{
			if(this.className == "red")
			{
				if(this.style.background !="#FFCC99")
				{
					this.style.background = '#FFCC99' ;
				}
				else
				{
					this.style.background = "#ff0000" ;
				}
			}
			
			if(this.className == "white")
			{
				if(this.style.background !="#FFCC99")
				{
					this.style.background = '#FFCC99' ;
				}
				else
				{
					this.style.background = "#ffffff" ;
				}
			}
		}
	}
}

window.onload = changeRowColor ;

html

	<table id="table_color">
		<tr class="red">
			<td>pwet</td>
			<td>pwet</td>
			<td>pwet</td>
		</tr>
		
		<tr class="white">
			<td>pwet</td>
			<td>pwet</td>
			<td>pwet</td>
		</tr>
	</table>

CSS

table
{
	border: 1px solid #000 ;
	background: #0f0 ;
}

table tr.red
{
	background: #f00 ;
}

table tr.white
{
	background: #fff ;
}


Bon la le rétablissement de la couleur ne fonctionne pas je sais pas trop pourquoi, c'est surement très crétin... à voir donc.


Nota j'ai mis [ i] avec une espace pour leurrer le BBcode, donc il faut l'enlever dans le code pour que ca marche.
Modifié le 05 Nov 2004 - 17:15
Quit à utiliser les noms de classe ne serait-il pas plus judicieux de faire comme ça (ça permet de multiplier les effets de style sans surcharger le JS) :

CSS

table {
  border: 1px solid #000 ;
  background: #0f0 ;
}

table tr.paire {
  background: #f00 ;
}

table tr.impaire {
  background: #fff ;
}

table tr.paireOver;
table tr.impaireOver {
  background: #fc9 ;
}


HTML
	<table id="table_color">
		<tr class="paire">
			<td>pwet</td>
			<td>pwet</td>
			<td>pwet</td>
		</tr>
		
		<tr class="impaire">
			<td>pwet</td>
			<td>pwet</td>
			<td>pwet</td>
		</tr>
	</table>


JavaScript
function changeRowColor()

{

	trs = document.getElementById("table_color").getElementsByTagName('tr');
	for(var i = 0 ; i < trs.length ; i++)
	{
		trs[ i].onclick = function()
		{
			pos = this.className.indexOf("Over");
			if(pos == -1){
				this.className = this.className+"Over" ;
			} else {
				this.className = this.className.substring(0,pos-1);
			}
		}
	}
}

window.onload = changeRowColor ;
Ok merci bien vous êtes géniaux !!

Bon, je m'y colle tout de suite je teste ça et je vous tiens au courant.

Smiley cligne

Bon j'ai effectué les modifications, j'ai gardé la fonction écrite par Jep et voici le reste

table {

font-size: 9px ;
border: 0px ;
}

table tr.header {

font-size: 9px ;
font-weight: bold ;
color: #FFFFFF ;
background-color: #000000 ; 
}

table tr.paire {

font-size: 9px ;
background-color: #FFFFFF ;
}

table tr.impaire {

font-size: 9px ;
background-color: #FF92A9 ;
}

table tr.paireOver;
table tr.impaireOver {

font-size: 9px ;
background-color: #F9AD81 ; 
}

table tr.impaire:hover, table tr.paire:hover {

font-size: 9px ;
background-color: #6DCFF6 ;
}


et le tableau

<table width=\"100%\" id=\"table_color\">

<tr class=\"impaire\">

<tr class=\"paire\">


le hover au passage de la souris marche, le clic fonctionne mais il ne m'affiche pas la couleur demandé Smiley eyecrazy , j'ai essayer de bidouiller un peu le script (j'ai beaucoup de mal en JS), mais rien à faire. Quelqu'un a une idée pour la couleur ?
Modifié le 08 Nov 2004 - 09:09
Le problème viens de ta feuille de style ! Tu as mis un ; après tr.paireOver or il faut une virgule Smiley cligne

En suite, tu risque d'avoir un problème avec la pseudo class :hover apliqué sur un TR : ça ne fonctionnera pas avec IE et ça ne fonctionnera plus avec Firefox une fois que tu auras cliqué puis recliqué sur un TR !!!!
Ok, j'ai corrigé pour le ; Smiley rolleyes Et il est vrai que le :hover ne marche plus, par contre je ne peux pas le faire plusieurs fois (cliquer et recliquer) Smiley eek Est-ce normal ?

Merci

@Jep : excellent site !
Modifié le 08 Nov 2004 - 14:56
jpwalker a écrit :
Est-ce normal ?

Non, ce n'est pas normal, j'ai fait une petite erreur dans mon script il faut corriger cette ligne :

this.className = this.className.substring(0,pos);

C'est le "-1" qui posait problème... de cette manière, même le :hover fonctionne (sous mozilla Smiley cligne )
Merci Jep !!

Alors là, vraiment bien joué ! Ca fonctionne parfaitement ! Bon je vous remercie tous pour votre aide très précieuse Smiley cligne

@Jep : remerciement spécial pour toi et encore félicitation pour le site perso, très beau graphisme Smiley smile
(et bon contenu aussi, il est dans mes bookmarks maintenant) Smiley cool
Sujet clos
Aller à