Fond jaune clair et contour rouge de la cellule qui a le focus

Version imprimable

Bonjour tout le monde,

J'ai un tableau qui contient 5 colonnes.

La 5e colonne contient des input.

J'aimerais simplement que la cellule active (celle qui a le focus) ait un fond jaune clair et un contour rouge.

Mieux encore, la ligne complète ne peut pas être de bordure rouge et l'input de la ligne en fond jaune claire ?

J'ai cherché sur les sujets déjà placés et j'ai trouvé ceci :

http://www.developpez.net/forums/m544417-6/

Mais après avoir fais un copier/coller du code dans Dreamweaver 8, le résultat me donne un tableau avec des inputs sans couleur.

Voici mon code au cas où :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
 
<body>
<table border="1" width="100%">
	<tr >
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="20%"><input type="text" name="textfield" /></td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="30%"><input type="text" name="textfield2" /></td>
		<td  onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="25%"><input type="text" name="textfield3" /></td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="25%"><input type="text" name="textfield4" /></td>
	</tr>
	<tr>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="20%">&nbsp;</td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="30%">&nbsp;</td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="25%">&nbsp;</td>
		<td onfocus="this.parentNode.style.backgroundColor='red'" onblur="this.parentNode.style.backgroundColor='white'" width="25%">&nbsp;</td>
	</tr></table>
</body>
</html>

Merci d'avance pour votre aide.

beegees

23/08/2008, 13h05
Auteur

bonjour,

Firefox ne gère pas le onfocus et onblur sur les td (contrairement à IE).

Citation:

Envoyé par Auteur

bonjour,

Firefox ne gère pas le onfocus et onblur sur les td (contrairement à IE).

Bonjour,

Merci pour ta réponse.

Etrange, j'ai trouvé ce code :
Code:

1 2 3 <td width="20%"><input type="text" size="40" maxlength="50" name="pharma_name" onFocus='javascript:this.style.backgroundColor="yellow"' onBlur='javascript:this.style.backgroundColor="white"'></td>
Et vous pouvez voir le résultat ici

J'aimerais juste que cela s'applique à TR, est-ce possible ?

Merci encore.

beegees

tu peux utiliser onmouseover et onmouseout :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<table border="1" width="100%">
	<tr >
		<td onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''" width="20%"><input type="text" name="textfield" /></td>
		<td onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''" width="30%"><input type="text" name="textfield2" /></td>
		<td onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''" width="25%"><input type="text" name="textfield3" /></td>
		<td onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''" width="25%"><input type="text" name="textfield4" /></td>
	</tr>
	<tr onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''">
		<td width="20%"><input type="text" name="textfield" /></td>
		<td width="30%"><input type="text" name="textfield2" /></td>
		<td width="25%"><input type="text" name="textfield3" /></td>
		<td width="25%"><input type="text" name="textfield4" /></td>
	</tr>
</table>

1ère ligne du tableau : j'applique les événement sur les td
2ème ligne du tableau : les événements sont appliqués sur le tr

23/08/2008, 16h04
beegees

Citation:

Envoyé par Auteur

tu peux utiliser onmouseover et onmouseout :
1ère ligne du tableau : j'applique les événement sur les td
2ème ligne du tableau : les événements sont appliqués sur le tr

Merci pour ta réponse et pour le temps que tu y as consacré.

Le résultat est celui attendu, seul l'évènement déclencheur n'est pas celui que je veux utiliser.

Je pense que ce n'est pas possible de sélectionner une ligne d'un tableau si on clique dans une de ses cellules.

Merci quand même.

beegees
23/08/2008, 16h36
Invité
Bonjour,
Code:

1 2 3 4 <tr onclick="..."> .... </tr>
Si tu cliques sur une cellule contenu dans le <tr>, l'évènement est pris en compte aussi sur le <tr>
A+

Citation:
Envoyé par jlmag
Bonjour,
Code:

1 2 3 4 <tr onclick="..."> .... </tr>
Si tu cliques sur une cellule contenu dans le <tr>, l'évènement est pris en compte aussi sur le <tr>
A+
Bonjour,

Merci pour ta réponse.

J'ai fais ceci :
Code:

1 2 3 4 5 6 7 8 <table border="1" width="100%"> <tr onclick='javascript:this.style.borderColor="red"' > <td width="20%"></td> <td width="20%"></td> <td width="20%"><input name="pharma_name" type="text" onFocus='javascript:this.style.backgroundColor="yellow";javascript:this.style.borderColor="red"' onBlur='javascript:this.style.backgroundColor="white"' value="CLIQUEZ ICI" size="40" maxlength="50"></td></tr> </table>
ça marche pas :?

Tu peux tester ici en cliquant sur "Cliquez ici"

Merci encore pour ton aide.

beegees

Re,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<body>
 
<table border="1" width="100%">
  <tr onclick="this.style.backgroundColor = 'red'" >
    <td  width="20%">cell-1</td>
    <td  width="20%">cell-2</td>
    <td  width="20%">
      <input name="pharma_name" type="text" onfocus="this.style.backgroundColor='yellow' ;this.style.borderColor='red'" onblur="this.style.backgroundColor='white'" value="CLIQUEZ ICI" size="40" maxlength="50">
    </td>
  </tr>
</table>
 
</body>

Là, cest ok

A+

Citation:
Envoyé par jlmag
Re,
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <body> <table border="1" width="100%"> <tr onclick="this.style.backgroundColor = 'red'" > <td width="20%">cell-1</td> <td width="20%">cell-2</td> <td width="20%"> <input name="pharma_name" type="text" onfocus="this.style.backgroundColor='yellow' ;this.style.borderColor='red'" onblur="this.style.backgroundColor='white'" value="CLIQUEZ ICI" size="40" maxlength="50"> </td> </tr> </table> </body>
Là, cest ok

A+
Re,

C'est vraiment super ce que tu me proposes.

N'est-il pas possible de remplacer :

Code:

<tr onclick="this.style.backgroundColor = 'red'" >

par

Code:

<tr onclick="this.style.borderColor = 'red'" >

?

et tant que j'y suis, n'y a-t'il pas une possibilité de revenir à une cellule blanche quand le focus n'y est plus ?

Encore merci pour ton aide.

beegees

23/08/2008, 18h32
Invité
Re par trouver pour tr => border color.
Sinon utilise les CSS
Code:

1 2 3 4 5 6 7 <style type="text/css"> tr:hover { background-color: red; } </style>
A+

Voir ICI pour les évènements des éléments HTML
23/08/2008, 18h42
beegees
Citation:
Envoyé par jlmag

Re par trouver pour tr => border color.
Sinon utilise les CSS

Code:

1 2 3 4 5 6 7 <style type="text/css"> tr:hover { background-color: red; } </style>

A+

Voir ICI pour les évènements des éléments HTML
Re,

Je te remercie pour ta patience et pour ton dévouement.

Je trouve l'effet pas mal du tout.

Je vais aller voir sur le forum CSS si il y'a moyen d'adapter ton code à une ligne sélectionnée.

Encore merci
beegees