Cliquer sur une ligne d un tableau et changer sa couleur

salut,

Je souhaite que lorsque le curseur de ma souris passe sur une ligne,et que je clique sur cette ligne alors cette ligne change de couleur par rapport au autre ligne du tableau et quand je clique sur une autre ligne alors l ancienne ligne cliqué reprend sa couleur d origine et c est cette nouvelle qui prend une nouvelle couleur.
Pour faire un truc comme en excel quand je selectionne une ligne elle est bleu et si je choisi une autre ligne alors cette ligne redeviens blanche et c est la nouvelle ligne qui est bleu ?


Merci

Salut
a premiere vue:
tu teste te balises <tr>
et tu inclue un mouseclick avec quelque chose comme cela
Pas testee...

window.onload = inittable;
function inittable()
{
if (!(document.createElement && document.getElementsByTagName)) return;

var nav = document.getElementById('tatable');
var rows = nav.getElementsByTagName('tr');
for (var i=0;i<rows .length;i++)
{
rows[ i]).onclick = TonmouseClick;
}
}

function TonmouseClick()
{
// ce que tu doit faire quand on click
alert('ok');
}

ca te donne 2/3 de la solution

a+
Modifié par thetoad (11 May 2005 - 15:31)

function colorActiveLine() {
var lines = document.getElementsByTagName('tr');
for (var i = 0; i < lines.length; ++i) {
lines[ i].onclick = function() {
for (var j = 0; j < lines.length; ++j) {
lines[j].style.background = '#couleurpardefaut';
}
this.style.background = '#f00';
};
}
}

window.onload = colorActiveLine;

Ca devrait fonctionner... pas testé
Modifié par Olivier (11 May 2005 - 13:15)

j'arrive pas a metre le []
rows(i).onclick = TonmouseClick;
rows(i).number = i;
dans mon code plus haut
comme tu as fait Olivier ???
Modifié par thetoad (11 May 2005 - 13:21)

[ i] met en italique.... Soit tu mets un espace (comme ici), soit tu ne mets pas i, mais j... :-p [j]

@+, HoPHP

HoPHP a écrit :
[ i] met en italique.... Soit tu mets un espace (comme ici), soit tu ne mets pas i, mais j... :-p [j]

@+, HoPHP

logique, evident
on finijamais t'apprendre

en tout cas tres elegante ta solution Olivier
la mienne est plus pedagogique

merci HoPHP
Modifié par thetoad (11 May 2005 - 14:31)

Pourquoi plus pédagogique ??

Etre pédagogue c'est en faire plus alors qu'on peut en faire moins
Etre stupide donc ^^ lol

Je dis pas que tu es stupide hein c'est juste que ça m'énerve dans les cours d'info faut tout le temps réinventer la roue, et j'ai tendance à détester ça ! Bah oui, je suis fleimard

pédagogique ??

1.parce-que en separand la function reliee a onclick
c'est plus clair pour les deb...

2.parce-que j'aime faire reflechire le gens et pas doner les solutions touttes faittes

Perso quand je vien sur un forum j'aime bien que on m'aide à apprendre a faire des choses et a les comprendre (dans ce cas du JS) autrment je fait une recherche avec google et a 9 fois sur 10 je trouve le script qu'il me faut

parcontre si je doit choisir de mettre dans une page ton script ou le mien je mets le tien

et t'en fait pas, je suis fleimard aussi

a+
Modifié par thetoad (11 May 2005 - 15:44)

Wé je comprend ton point de vue, mais moi je vois pas ça tout à fait comme ça

Disons, que j'aurais pu (dû) mettre des explications avec le code, ce qui aurait été pédagogique, mais je préfère faire un code concis, efficace et propre, et j'ai répondu rapido parceque j'étais préssé

Mais je comprend ton point de vue

Par contre, google... oui mais ... non ^^ bah vui, des ressources JS propres, y en a pas des masses et c'est pas super bien indexé, on trouve toujours l'editeur JS en tête de google et dans le genre codes de porcs, c'est pas mal !!!! Même s'il y a quelques exceptions.

<typo>

HoPHP a écrit :

[ i] met en italique.... Soit tu mets un espace (comme ici), soit tu ne mets pas i, mais j... :-p [j]

Une espace. On dit une espace

</typo>

[ C'était la minute « langue française » ]

je comprend ton point de vue aussi.

et pour Google je suis aussi d'accord avec toi.

donc amis

a+

thetoad

PS : desolee pour le Français mais je suis Italien
PS2: a propos de code mal ecrit tu pense quoi du code que j'ai modifiee dans ce: topic
Modifié par thetoad (11 May 2005 - 15:49)

Pour le p.s. 1, tu es tout excusé On engueule les français qui écrivent en langage SMS, mais pas les italiens (ou autre étrangers) qui écrivent très bien le français mis à part quelques fautes

Tu vois, Stephan t'aurai jamais repris s'il avait su que tu étais italien, donc, c'est bien que ça ce voit pas et donc que tu parles très bien français

[ euh... J'ai cité HoPHP... pas thetoad... -- Stephan]
[Woupss ^^, j'ai mal interprété le p.s. de thethoad -- Olivier]
[Woow tu touches pas à mon topic ! tu touches à ta vie là !! -- Olivier]
[ bah... Je ne voulais pas polluer... -- Stephan]

Moi aussi je met un espace ! Mais je fais confiance à Stephan, il est québécois, et les québécois sont plus soucieux du français que les français !!

Pour le p.s. 2, j'ai pas regardé le code et j'ai pas trop le temps de voir désolé , mais ton code précédent était correct aussi, juste moins condensé, mais c'était très correct ^^

Bon, si on arreté de polluer le topic
Modifié par Stephan (11 May 2005 - 16:11)

En fait, je vais apporter une précision à ce que j'ai dis plus haut, en fait ton code (thetoad) il est très bien, et mieux que le mien dans certain cas, en fait c'est pas une question de bien codé ou mal codé ici, mais plutôt de contexte.

On utilisera généralement une fonction auxiliaire si elle est amenée à être réutilisé ailleurs, sinon, si c'est quelque chose de précis qui ne sera utilisé qu'une seule fois, mieux vaut insérer directement le code.

Donc, pour notre cas, il y a des chances que la réinitialisation des couleurs soit réutilisé ailleurs, par exemple pour faire une alternance de couleurs une ligne sur 2.

Donc, la fonction deviendrait quelque chose du style

function colorActiveLine() {
var lines = document.getElementsByTagName('tr');
for (var i = 0; i < lines.length; ++i) {
lines[ i].onclick = function() {
initLinesColors();
this.style.background = '#f00';
};
}
}

function initLinesColors() {
var lines = document.getElementsByTagName('tr');
for (var j = 0; j < lines.length; ++j) {
lines[j].style.background = '#couleurpardefaut';
}
}
window.onload = colorActiveLine;

Par exemple.

Et donc, dans initLinesColors, on pourrait faire un système d'alternance des couleurs avec donc un truc du style :

function initLinesColors() {
var lines = document.getElementsByTagName('tr');
for (var j = 0; j < lines.length; ++j) {
var couleur = (j % 2) ? '#couleur1' : '#couleur1';
lines[j].style.background = couleur;
}
}

Ce qui mettra la couleur #couleur1 (genre #f00) sur les lignes de rang pair et #couleur2 (#00f par exemple) sur les lignes de rang impair.

On a ainsi un meilleur controle sur les choses et plus de posibilité.
(il ne faudra pas oublier d'appeller dans ce cas initLinesColors dans le window.onload avec

window.onload = function() {
initLinesColors();
colorActiveLine();
};

Voilà pour le petit topo.

Enfin, ça c'est ma méthode, chacun fait comme il veut et puis je suis pas un pro du JS, alors je peux me planter ^^ mais je pense pas ici.
Modifié par Olivier (11 May 2005 - 16:14)

merci et tres bien esplique

la tu me bat meme en pedagogie

perso dans un souci de reutilsation

examlpe : j'ai 2 tables dans mon html

je ecriverait quelque chose comme cela

window.onload = function(){ 
				inittable('table1');
				inittable('table2');};


function inittable(table)
{
		if (!(document.createElement && document.getElementsByTagName)) return;// DOM compatible ??
		
		var nav = document.getElementById(table);
		var rows = nav.getElementsByTagName('tr');
		for (var i=0;i<rows .length;i++)
			{
			rows[ i].onclick = rowMouseClick;
		}
}

function rowMouseClick()
{
	if (!(document.createElement && document.getElementsByTagName)) return;// DOM compatible ??
	// prend la table de la ligne cliquee
	var nav=this.parentNode;
	var rows = nav.getElementsByTagName('tr');
	for (var i=0;i<rows .length;i++)
		{
		if (rows[ i]!=this) rows[ i].style.background='#00AA00';
		else  this.style.background='#0000AA'
		}
}

Oui, il faudrait adapter ça pour être le plus facile à utiliser.
Mais quitte à faire comme ça, j'irais plus loin
Je parametrerai ma fonction comme ceci :

function initTable(type, typeName) {

}

Ou type est 'id', 'class', ou rien et on selectionne les tables par ID, class ou toutes les tables.
Ca donnerai par exemple

window.onload = function() {
initTable('id', 'monId'); // pour la table ayant l'id "monId"
initTable('class', 'maClass'); // pour les tables ayant pour class "maClass"
initTable(); // pour toutes les tables de la page
};

ok merci
et je voulais savoir
en faite j ai un tableau et les cellule de mon tableau je veux mettre des element de ma base de donné(identifiant,nom.....), et donc je voudrais que quand je clique sur un bouton (qui contienne le code javascript pour l ouverture d une nouvelle fenetre) recuperer l identifiant de la ligne du tableau selectionner (celle en noir) qui me permettra alors d ouvrir ma fenetre avec les bon parametre

c est la fonction qui me permet d ouvrir une fenetre
et j aurai amié savoir si cette fonction,que je souhaite mettre dans un bouton n ouvre que la ligne qui est rester en surbrillance ,quand on a cliquer dessus

function ouvrir(id){ 
var URL = "pop.php?id=" + id; 
window.showModalDialog(URL,self,"dialogWidth:400px;dialogHeight:400px;center:1;scroll:0;help:0;status:0"); 
} 

je sais pas si j ai été clair

mehdi a écrit :

je sais pas si j ai été clair

Je sais pas mais en tout cas, moi j'ai rien capté !

je vais essayer de me faire comprendre en prenant un exemple
supposons que tu ai une base de donnée avec 2 tables, une table ville et une table personne et que ces 2 table soit relié entre elle.
A l aide d une liste je selectionne la ville et sa m afficher toute les personne de cette ville dans un tableau.
Et je voudrai que je clique sur une ligne du tableau(cette ligne change de couleur par rapport au autre,je la selectionne comme sur excel) et qu elle est selectionner donc,bin qu en cliquant sur un bouton je fasse apparaitre une nouvelle fenetre,qui contient les caracteristique de la personne( c est a dire ce qu il y avait sur la ligne selectionner) et ainsi cette nouvelle fenetre avec les caracteristique de la personne me permettra de faire des modification de cette personne.

C est plus clair

Mwé, je crois comprendre, mais si tu pouvais écrire en français, ça m'arrangerai parceque là on comprend pas grand chose.

A mon avis, rien à voir avec le JS au niveau de l'ouverture de la fenetre, tu passe l'id de la personne (les personnes doivent avoir un id à priori) dans l'url et dans ta fenetre, en fonction de l'url tu affiches tel ou tel information.

ouvrir une fenetre avec les info correspondante quand tu clique sur une ligne d un tableau j ai deja fait.
Mais le truc c est que je veux mettre sa dans un bouton, et je veux recuperer l id de la ligne qui est cliquer